停止文本div重叠

Question

我正在尝试制作两个文本位于彼此下方的div，并让它们自动调整到文本的高度，但它们似乎重叠，就像文本忽略div一样。到目前为止，它看起来像这样：

我的HTML如下：

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

，CSS为：

.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;
}

有人可以建议我如何解决它吗？提前谢谢！

Answer 1

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

否则：

我要做的是添加一些<br>标记，以便在不干涉CSS的情况下将两个div分开。

代码现在是：

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

保持CSS不受影响。

Answer 2

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;***
}