在固定寬度的容器中浮動DIV以繼續對齊水平？

-4

我有一個固定寬度的960px容器，我正在調整我的設計以適應各種屏幕分辨率。在容器內，我有幾個使用寬度％和最小寬度浮動DIV就像：在固定寬度的容器中浮動DIV以繼續對齊水平？

width:80%; 
min-width:200px;

這裏的問題是，DIV■不要排隊水平;他們最終在彼此之下。以前，我的設置寬度爲DIV s（我現在改爲最小寬度）。

目前如何我已經形成的DIV的一個例子：

集裝箱：

width: 830px; 
float: left;

月1日 - 科拉姆：

width:100%; 
min-width: 200px; 
float: left;

第二-科拉姆：

width:100%; 
min-width: 200px; 
float: left;

3 --colum：

width:100%; 
min-width: 200px; 
float: left;

等

在這個例子中，第1-科拉姆DIV覆蓋容器的整個寬度和推動其它的DIV下來。下面HTML的

例子：

<div id="container"> 
    <div id="1stcolum">Hello world</div> 
    <div id="2ndcolum">Hello world</div> 
    <div id="3rdcolum">Hello world</div> 
</div>

正如你所看到的，沒有在HTML十全十美。

來源

2012-08-07 Henrik Petterson

我仍然不知道是什麼問題，我認爲這將是在創造上http://jsfiddle.net/演示您的最佳利益，並清楚地描述你所需的輸出和問題。例如，如果容器是830px，爲什麼'width：100％'帶'min-width：200px'？ – 2012-08-07 15:49:33

下面是你的代碼演示（ids調整爲正確的，而不是以數字開頭）：http://jsfiddle.net/DS28L/這個演示有什麼問題？自從您上次修改以來，已經有20分鐘了，我一直非常耐心，因爲您好像是受到虐待/騷擾的受害者，但我現在放棄了。 – 2012-08-07 15:58:54

您製作了三個div，所有這些都是容器寬度的100％。 **按照定義**，它們佔據整個寬度。你已經得到了你所要求的。如果你真的希望它們佔據集裝箱的三分之一，你爲什麼不試試把它們做成1/3的寬度？ – meagar 2012-08-07 18:48:01

根據您發佈的CSS和HTML ..

你不能有3個，浮空的div除非他們都堆放佔用相同的寬度爲100％。這就是爲什麼div堆棧。第一列佔據寬度的100％，第二列除了第二列低於第一列之外，也沒有空間佔據寬度的100％。

如果您希望列實際上是列，則需要它們的寬度爲33.3％。（100％的三分之一）

而且，如果您希望列的最小寬度爲200像素，則不需要每列的最小寬度，只需要600px的最小寬度即可容器分區。

DEMO

來源

2012-08-07 16:00:16 Scott

藉助Firebug，我可以確定百分比，並最終添加一個最小寬度進行調整。乾杯兄弟！ – 2012-08-07 20:45:00

在固定寬度的容器中浮動DIV以繼續對齊水平？

回答

相關問題