Html 阻止文本div重叠

我试图使两个div的文本位于彼此下方，以便它们自动调整到文本的高度，但它们似乎重叠，好像文本忽略了div。到目前为止，看起来是这样的：

我的HTML如下所示：

<div class="one_half_left"> 
   <div class="text1">Text</div>
   <div class="text2">XYZ</div>
</div>

.one_half_left { 
    margin: 40px 0 0px 40px; 
    float:left; 
    width:44%;
}

.text1{ 
    font-family:'NimbusSans', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;    
    font-size:90px;
    color:#948e7d;
    min-height: 90px;
}

.text2{ 
    font-family:'NGBEC', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;    
    font-size:140px;
    margin: 0 0 110px 0;
    color:#305d0b;
    min-height: 140px;
}

---

有人能建议我怎样修理它吗？提前谢谢

我认为问题在于您使用的屏幕分辨率非常低，或者您没有全屏打开它。在这种情况下，改变浏览器就可以了

否则：

我要做的是添加一些

标记，以便在不干扰CSS的情况下分隔两个div

现在的准则是：

<div class="one_half_left">
    <div class="text1">Text</div>
    <br>
    <br>
    <br>
    <div class="text2">XYZ</div>
</div>

正文






XYZ

---

保持CSS不变。

您的代码工作正常。这不是重叠，我已经测试了你的代码和它的工作良好。你必须在不同的浏览器中测试它..text2{overflow:hidden；}无法复制..除非有你没有提到的东西-问题是你发布的代码没有显示出来。我尝试过增加样式表中的字体大小，div按比例增长而不重叠。为了生成您发布的图像，我假设您的div从页面的某个地方继承了其他css属性。例如，相对位置或用顶部值固定。

Hey You can add clear:both; in both class:-
.one_half_left { 
    margin: 40px 0 0px 40px; 
    float:left; 
    width:44%;
}

.text1{ 
    font-family:'NimbusSans', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;    
    font-size:90px;
    color:#948e7d;
    min-height: 90px;
    ***clear:both;***
}

.text2{ 
    font-family:'NGBEC', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;    
    font-size:140px;
    margin: 0 0 110px 0;
    color:#305d0b;
    min-height: 140px;
    ***clear:both;***
}