停止重叠的文本div

我试图让两个div与文本坐在对方下面，并为他们自动调整到文本的高度，但他们似乎重叠像文本忽略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; 
}

可有人建议如何我可以修好它？提前致谢！

来源

2016-03-28 mckeegan375

您的代码正常工作。它不重叠 –

我测试你的代码，它的工作正常。你必须测试它到不同的浏览器。 – Hardy

.text2 {overflow：hidden;} – SnakeFoot

我认为问题在于您使用的是真正低分辨率的屏幕，或者您没有以全屏方式打开它。在这种情况下，改变浏览器就可以做到这一点。

否则：

我会做的事情是添加一些<br>标签，以便不与CSS插手的两个div分开。

现在，该代码将是：

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

离开CSS不变。

来源

2016-03-28 13:19:51

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

来源

2016-03-28 13:25:41 vishu

停止重叠的文本div

回答

相关问题