防止最後（流體）列在瀏覽器調整大小下降？

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