左浮動2個div，當div1停止縮小時，div2開始重疊…如何防止？

Question

我有這個：

+--LEFTFLOATEDDIV1-+ +--LEFTFLOATEDDIV2-+ <--- screen edge
| min-width:400px  | |                  |
| width:50%        | |                  |
+------------------+ +------------------+

縮小瀏覽器窗口會使div1縮小，然后按應在400px處停止。 但是，當縮小更多時，div2繼續向左移動，覆蓋div1。 我該如何預防？ 當div1停止縮小時，我希望div2停止移動。 怎么樣？

Answer 1

您不能只給兩個div周圍的包裝紙添加最小寬度嗎？ Div1的最小寬度是400像素，假設Div2的寬度= 300像素，請使用min-width=700px （+邊框）包裝：
http://jsfiddle.net/Zb5MV/

Answer 2

嘗試從右div移除浮點數。

Answer 3

只需將它們包裝在容器/容器div中，其最小寬度等於內部div的兩個最小寬度。

所以內聯它看起來像這樣...

<div style="min-width:800px;">
    <div style="min-width:400px; width:50%; float:left; height:100px;background-color:#ccc;">
        &nbsp;
    </div>
    <div style="min-width:400px; width:50%; float:left; height:100px;background-color:#eee;">
        &nbsp;
    </div>
</div>

別忘了IE6不支持min-width。