CSS海誓山盟旁邊2個格不重疊的窗口調整

以下是我的HTML和CSS代碼CSS海誓山盟旁邊2個格不重疊的窗口調整

<body> 
<div style="display: inline; postion: relative; float: left; width: 20%; min-height: 350px; background-color:red"> 
TESSSSSSSSSTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT123 
</div> 
<div style="display: inline; postion: relative; float: left; width:80%; min-height: 350px; background-color:green"> 

</div> 

</body> 
</html>

在窗口resize在兩格重疊，有什麼辦法避免這種情況？我希望兩個div始終保持一行，不管窗口大小如何（也就是每個div都包含div內容）。

得到任何幫助，謝謝，

來源

2013-03-01 ComeRun

它們的widths是使用%值定義的，因此它們相對於瀏覽器大小增長/縮小。爲了讓你的文字在鄰近的<div>中不重疊，請將word-break: break-all;添加到包含文字的第一個<div> ..也請提及您使用的瀏覽器。

Example

來源

2013-03-01 05:00:58 Adrift

謝謝，但在文本旁邊，我還有左div的內容div被右div.any解決方案覆蓋？ – ComeRun 2013-03-01 05:07:59

當你在左邊div的右上方說一個按鈕時，你還可以給我一個例子嗎？ – ComeRun 2013-03-01 05:09:05

我知道我給你一個例子。當我有一個文本，它的罰款，但是當另一個內容如按鈕或其他東西打破不起作用 – ComeRun 2013-03-01 05:11:55

他們不這樣做，它們的寬度改變根據<body>重疊，他們留在旁邊的其他相同線路之一。

來源

2013-03-01 04:59:24 martriay

如果我把內容在左股利和調整窗口的大小，逐漸走在正確的div下！ – ComeRun 2013-03-01 05:00:50

好吧，那麼你的問題是錯誤的。你想要什麼樣的內容？ – martriay 2013-03-01 05:02:50

你想'left' div在'right'的頂部嗎？ – 2013-03-01 05:02:53

的div不overlaping，你的測試文本僅僅是不帶空格，瀏覽器將只重新大小的空間文本。嘗試在測試文本中添加空格，您將看到文本將重新調整大小（現在，您還應該看到div實際上不會重疊）。另外，如果您將元素設置爲內聯，那麼將元素像您所做的那樣向左浮動是沒有意義的。如果您打算將div用作網站佈局的一部分，我會建議讓它們左移，這樣可以將div保留爲塊元素，這可以讓CSS更具風格。

來源

2013-03-01 05:09:27 mufasa

HTML

<div class="firstDiv"></div> 
<div class="secondDiv"></div>

CSS

.firstDiv { 
    height:100px; 
    width:60%; 
    float:left; 
    background-color:#222; 
} 
.secondDiv { 
    height:100px; 
    width:60%; 
    float:left; 
    background-color:#000; 
}

使用百分比%，讓您的DIV更fixeble DEMO

來源

2013-03-01 05:11:28 jhunlio

這些都在彼此之上 – ComeRun 2013-03-01 05:13:10

@ComeRun你好，你檢查演示？ – jhunlio 2013-03-01 05:17:28

是啊，我想在一行上的div。 urs在彼此之間 – ComeRun 2013-03-01 05:18:54

CSS海誓山盟旁邊2個格不重疊的窗口調整

回答

相關問題