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

正如您在this fiddle上看到的那样，当您调整窗口大小时，最后一列会向下跳跃。我该如何防止这种情况？

Answer 1

你可以签出像bootstrap.js这样的东西，这有助于创建这样的页面。

Bootstrap

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实线边框。

您可以通过两种不同的方式解决问题：

从第三列移除width: 18%;和float: left;并添加overflow: hidden;
将box-sizing添加到三列

以下是http://jsfiddle.net/5666G/

您一定要阅读CSS Box model和Float containment

当非常窄的窗口时，响应的3列页面最后一列跳下来

3 个答案: