css - 当窗口非常窄时，响应式 3 列页面最后一列跳下

Question

html是：

<div id="container">

<div id="top-bar">Top Bar</div>    
<div id="nav-bar">
    <a>Blah 1</a>
    <a>Blah 2</a>
    <a>Blah 3</a>
</div>

<div id="main">
    <div id="column-left">
        column left
    </div>
    <div id="column-right">
        column right
    </div>
     <div id="column-right-adsense">
        column right adsense
    </div>
    <div class="spacer"></div>
</div>

<div id="footer">footer</div>

而CSS是：

#container {
/* width: 500px; */
border: 1px solid black;
}

#top-bar {
height:60px;
border: 1px solid red;    
}

#column-left {
border: 1px solid blue;    
width: 40%; /* 200 / 500 */
 float: left;
}

#column-right {
    border: 1px solid yellow;    
    width: 40%; /* 200 / 500 */
    float: left;
}
#column-right-adsense {
        border: 1px solid cyan;    
width: 18%; /* 90 / 500 */
 float: left;

}

.spacer {
    clear:both;
}

正如你在这个小提琴上看到的那样，当你调整窗口的大小时，最后一列会向下跳。我怎样才能防止这种情况？

Answer 1

您可以签出类似 bootstrap.js 的内容，这将有助于创建这样的页面。

引导程序

Answer 2

它固定在这里，

检查，http://jsfiddle.net/cVdwE/2/

#column-left {
border: 1px solid blue;     margin:-1px;
width: 40%; /* 200 / 500 */
 float: left;
}

#column-right {
    border: 1px solid yellow;   margin:-1px;  
    width: 40%; /* 200 / 500 */
    float: left;
}
#column-right-adsense {
        border: 1px solid cyan;   margin:-1px;  
width: 20%; /* 90 / 500 */
 float: left;

}

Answer 3

发生这种情况是因为 1px 实心边框。

您可以通过两种不同的方式修复：

1. 从第三列中删除width: 18%;和添加float: left;overflow: hidden;
2. 添加box-sizing到三列

这是一个例子http://jsfiddle.net/5666G/

您绝对应该阅读有关CSS Box 模型和Float 包含的内容