我有这样的布局:
/*Sidebar*/ /*Column1*/ /*Column2*/ /*Column3*/ /*Sidebar*/
所以现在我想做一个流畅的布局,在台式电脑上看起来不错,但在缩小窗口(Ipad)上查看时会出现问题,所以它看起来像这样:
/*Sidebar*/ /*Column1*/ /*Column2*/ /*Sidebar*/
/*Column3*/
我的CSS:
#blogwrapper {
background-color:#F2F2F2;
margin:0 auto;
max-width: 56%;
}
.sidebar_sec {
width:21%;
float: left;
}
#blogs_three_cols .left_column {
float:left;
width: 32.7%;
}
#blogs_three_cols .middle_column {
float:left;
margin-left:0.5em;
width: 32.7%;
}
#blogs_three_cols .right_column {
margin-left:0.5em;
width: 32.7%;
float:left;
}
可以看到问题HERE (尽量减小浏览器大小)。
所以我的问题是在调整浏览器窗口大小时如何防止最后一列下拉?谢谢你!
最佳答案
调整中间和右边列的 margin-left
以使用 %
而不是 em
,值等于 100 -三个 div 的总宽度(在本例中为 0.95%)
#blogs_three_cols .middle_column {
float:left;
margin-left: 0.95%;
width: 32.7%;
}
#blogs_three_cols .right_column {
margin-left: 0.95%;
width: 32.7%;
float:left;
}
关于html - 防止最后(流体)列在浏览器调整大小时下降?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21167320/