5

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     |  |      |
            --------------
|          |                  |      |
            ----------------         
|-------------------------------------

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

更新 1：在结构图中添加了包装器 div

4

2 回答 2

4

你正在浮动你的元素；只要水平空间足以提供它们，它们就会并排放置。如果您不希望它们折叠，则应将它们放在具有明确宽度的容器中；不过，这将在您调整大小的某个时间点创建一个水平滚动条。

<!-- 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/

我的建议是接受这一点；查看响应式网页设计，了解如何利用浏览器的自然行为为您带来优势。

于 2013-01-10T02:50:36.350 回答
3

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

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

于 2013-01-10T02:58:44.397 回答