Question

HTML：

<div id="wrapper">

    <div id="tabs">   
    </div> <!-- tabs close !-->


    <div id="verticalStack">

        <div id="accordion">
        </div> <!-- accordion close !-->


        <div id="usersBox">
        </div><!-- usersBox close !-->

        <div id="displayProductButtons">
        </div> <!-- displayProductButtons close !-->

    </div>  <!-- verticalStack !-->


</div> <!-- wrapper close !-->

CSS：

body {
   margin:0;
   padding:0;
   font-family: Verdana, Times, serif;
   font-size: 12px;
   color: #333333;
   background-color: #F9F9F9;
   min-width: 944px;
}

#wrapper{
    margin:10px;
    width:90%;
}


#tabs {
    float:left;
    width:700px;
    margin-right: 10px; 
}

#verticalStack{
    float:left;
    width:400px;
    height:500px;
}

#accordion{
    float:left; 
}

#usersBox{
    width:100%;
    margin-top:10px;
    float:left;
    border:1px solid #aaa;
    border-radius:5px;
}

#display{
    margin-top:25px;
    float:left;
}

页面如下所示：

 ------------------------------------
| wrapper                            |
    -----   ------------------
|  |tabs|   |verticalStack    |      |
   -----   ------------------- 
|          |  |accordion   |  |      |
            -------------           
|          |  |usersBox    |  |      |
            -------------        
|          |  |display     |  |      |
            --------------
|          |                  |      |
            ----------------         
|-------------------------------------

当我调整页面大小时，veritcalStack div（以及内部div）属于tabs div。有人可以向我解释为什么会发生这种情况以及我能做些什么，谢谢。

更新1：为结构图添加了包装div

Answer 1

你浮动你的元素;只要水平空间足以提供它们，它们将保持并排。如果您不希望它们崩溃，您应该将它们放在具有明确宽度的容器中;这将在您调整大小的某个时刻创建一个水平滚动条。

<!-- these images will not collapse -->
<div id="container">
  <img src="http://placekitten.com/300/200" />
  <img src="http://placekitten.com/200/200" />
</div>

<!-- these images will collapse -->
<img src="http://placekitten.com/300/200" />
<img src="http://placekitten.com/200/200" />

工作小提琴：http://jsfiddle.net/jonathansampson/EChrr/

我的建议是接受这个;查看Responsive Web Design，了解如何利用浏览器的自然行为。

Answer 2

浮动元素将并排放置，直到没有足够的空间（即在浏览器窗口宽度小于1110px时）。如果设计必须如此，则应在#wrapper上将宽度或 min-width 设置为1110px宽。

你也可以尝试设置浮动元素相对于其他元素的宽度（即使用百分比），这样设计也适用于较小的分辨率。

如何阻止div在页面调整大小时崩溃？

2 个答案: