停止重疊的文本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

回答

相關問題