文本正在變形我的格

這裏是我有：

<div class="BigOne" ></div> 
<div class="leftOne" ></div> 
<div class="rightOne">This text is deforming the "leftOne"</div> 
</div>

而CSS：

.leftOne { 
    float: left; 
    width: 100%; 
    height: 100%; 
    border: 3px dashed #444; 
    border-radius: 7px; 
    box-sizing: border-box; 
} 

    .rightOne { 
    float: left; 
    width: 100%; 
    height: 100%; 
    border: 3px dashed #444; 
    border-radius: 7px; 
    box-sizing: border-box; 
}

我怎樣才能precent右div的文字，例如，從變形左格？

謝謝

來源

2015-11-29 Boris Detry

我不明白。 '寬度：100％;'div是整個窗口的寬度，一個在另一個之上。請解釋更多，或者您可能忘記包含一些相關的其他html。 –

nop，div取決於與「BigOne」和它的每個屏幕的不同，在這種情況下，我不能在px中使用，因爲它不同於eacch scrren的分辨率 –

請解釋您以何種方式定義「變形」。 – justinw

我從你的問題，並解釋明白了什麼，你想要的leftOne和rightOne寬度始終是相同的大小，而不管BigOne的寬度。然後你會想寬度改爲50%而不是100%像這樣：

.leftOne, .rightOne { 
    float: left; 
    width: 50%; /* Change this to 50% instead of 100% */ 
    height: 100%; 
    border: 3px dashed #444; 
    border-radius: 7px; 
    box-sizing: border-box; 
}

留意，你可以重構CSS，因爲這兩個類具有相同的風格。如果你想對其中的每一個應用不同的樣式，你可以將它們分開。

我還注意到，您已將它們的高度設置爲100%。如果您希望它們保持相同的高度，則需要指定BigOne類的高度。例如：

.bigOne { 
    width: 100%; /*or whatever width you want to set it to */ 
    height: 100px; /*or whatever height you want to set it to */ 
}

另一件事，你必須在第一行的額外</div>。刪除它，你的代碼應該工作。

<div class="bigOne"> 
    <div class="leftOne"></div> 
    <div class="rightOne">This text is deforming the "leftOne"</div> 
</div>

希望有所幫助。

來源

2015-11-29 01:34:37

文本正在變形我的格

回答

相關問題