html - 防止最后(流体)列在浏览器调整大小时下降？

Question

我有这样的布局:

/*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 (尽量减小浏览器大小)。

所以我的问题是在调整浏览器窗口大小时如何防止最后一列下拉？谢谢你!

Answer 1

调整中间和右边列的 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;
}