如何阻止 div 在页面调整大小时折叠？答案

【问题标题】：How to stop divs from collapsing on page resize?如何阻止 div 在页面调整大小时折叠？
【发布时间】：2012-12-24 09:01:54
【问题描述】：

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）位于选项卡 div 下。有人可以向我解释为什么会发生这种情况以及我能做些什么，谢谢。

更新 1： 将包装 div 添加到结构图中

【问题讨论】：

标签： css html collapse

【解决方案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 并了解如何利用浏览器的自然行为为您带来优势。

【讨论】：

您好，感谢您的回复（我会去看看这本书）。但是，我确实有一个 wrapper div 作为容器，但它仍然失败..
@greenpool 您需要在包装器上设置width 或min-width。它应该与浮动元素的总宽度一样大或更大。
谢谢伙计。我想我明白了！

【解决方案2】：

浮动元素将并排放置，直到空间不足（即在您的情况下，浏览器窗口的宽度小于 1110 像素）。如果这是必须的设计，那么您应该在#wrapper 上设置 width 或 min-width 为 1110px 宽。

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

【讨论】：