如何在CSS

DIV靜，我有其父股利和代碼中一個div如下所示如何在CSS

<div style="width:100%;height:400px;"><!--main_div--> 
<div id="left_container" style="width:float:left;width:220px;height:1000px;"></div> 
<div id="middler" style="float:left;width:800px;height:800px;background-color:#333;"></div> 
</div><!--end_of_main_div-->

這段代碼完全HTMLized在瀏覽器

但是，當我調整瀏覽器（改變寬度瀏覽器窗口）的股利（middler）是古怪的主推DIV下面..爲什麼會發生

喜歡這個頁面時，瀏覽器的尺寸重新調整是完全甚至蔓延
http://www.youtube.com/watch?v=YcpwaeP11pY

來源

2013-06-25 Zafta

正因爲如此：

float:left;

什麼它告訴瀏覽器：如果有足夠的空間把這些在同一條線上。如果沒有，請放下一條線。

您正在給它設置像素寬度，因此當它改變窗口大小時，它總是會下降到下一行。

而不是使用像素設置的寬度，而是嘗試使用百分比。

來源

2013-06-25 14:10:43

中調整大小時它是完美的，當我不使用float時：left兩個div被放置在另一個之上 – Zafta

這很有道理。嘗試將您的寬度從220px和800px分別更改爲20％和80％（取決於默認邊距/填充，您可能想要將其降低一個或兩個百分比，或者也可以添加負邊距以進行補償）。 –

thanx我的問題解決了:) – Zafta

因爲如果瀏覽器寬度超過1020px，那麼就沒有足夠的空間來放置兩個盒子，所以其中一個必須放棄。

來源

2013-06-25 14:10:34

但爲什麼當我在http://www.youtube.com/watch?v=YcpwaeP11pY – Zafta

因爲float:left只會嘗試並擁抱相鄰的div如果可以的話。這不能保證div將與第一個div的權利對齊。只有在瀏覽器窗口中有足夠的空間時纔會這樣做。

如果你想讓div的標題爲'middler'在你的其他div的右邊，你必須使用百分比或者使用固定/絕對定位。

在我看來，這個問題本身並不太具體。

您也可以在第2行中的語法錯誤：

此：

width:float:left;

真正應該是這樣的：

float:left;

但是這可能不會解決您的問題。

來源

2013-06-25 14:17:48 shennan

嘗試設置百分比大小。就像已經說過的人一樣，如果將其設置爲像素，則尺寸是靜態的，如果瀏覽器沒有空間來適應兩個水平方向，則會嘗試垂直放置它們。

來源

2013-06-25 14:20:11 WhiT3Kr0w

你可以爲你的主要DIV設置一個靜態最小寬度：

<div style="width:100%; min-width: 1020px; height:400px;">

注意：當您添加填充，保證金或邊境＃左容器或#middler你應該是號碼添加到最小寬度從您的主要div。

來源

2013-06-25 14:23:43 LinkinTED

回答

相關問題