縮放頁面（ctr + ctr-），摺疊模板

Question

我有三列固定寬度的頁面佈局。 看到下面的代碼片段的HTML和CSS

在某些分辨率的顯示器（特別是在Firefox中），當我縮放頁面（CTR-）時，模板頁面正在崩潰。 我無法找到解決此問題的方法。

作爲替代方法，我爲div.right-wrapper和div.right-column減少了1 px的寬度。 但這並不完全符合規範。

有沒有人有想法？ 謝謝。

<div class="main_content three-column"> 
     <div class="main_content_inner"> 
     <div class="left-column"> 
      <h1>Left column</h1> 
     </div> 
     <div class="right-wrapper"> 
      <div class="content-column"> 
       <h1>Content column</h1> 
      </div> 
      <div class="right-column"> 
       <h1>Right column</h1> 
      </div> 
      <div class="clr"></div> 
     </div> 
     <div class="clr"></div> 
    </div> 
</div> 



.main_content.three-column { 
    background: #fff; 
    width: 998px; 
    margin: 0 auto; 
} 

.main_content.three-column .main_content_inner { 
    padding: 0 10px; 
} 

.left-column { 
    width: 199px; 
    padding: 15px 10px 15px 0; 
    border-right: 1px solid #e8eaec; 
    float: left; 
    background: red; 
} 

.right-wrapper { 
    width: 768px; 
    border-left: 1px solid #e8eaec; 
    margin-left: -1px; 
    float: left; 
} 

.content-column { 
    width: 558px; 
    float: left; 
    padding: 15px 10px; 
    background: green; 
} 

.right-column { 
    width: 190px; 
    float: left; 
    padding: 15px 0 15px 0; 
    overflow: hidden; 
    background: blue; 
} 

.clr { 
    clear: both; 
    font-size: 0; 
    height: 0; 
    line-height: 0; 
    overflow: hidden; 
} 

.main_content.three-column h1 { 
    font: normal 24px/12px Arial, Tahoma, sans-serif; 
    color: #fff;  
    margin: 5px; 
} 

Answer 1

如果您想要縮放使用相對尺寸的佈局，例如em或ex，而不是絕對尺寸，例如px。

我建議的HTML元素設置的10px的字體大小，讓每一處1EM = 10px的，直到你改變字體大小：如果你想一個div是

html {font-size: 10px} 

然後993px設置它到99.3em。現在你的佈局將會擴展。

Answer 2

我發現下一個特定情況下的最佳解決方案。

1）刪除了塊右包裝

2）添加樣式塊

div.content-column { 
    border-left: 1px solid #e8eaec; 
    margin-left: -1px; 
    padding-right: 0; 
} 

3）添加樣式塊

div.right-column { 
    float: right; 
} 

我設置下一個寬度爲塊：

div.left-column { 
    border-right: 1px solid #E8EAEC; 
    float: left; 
    padding: 15px 10px 15px 0; 
    width: 199px; 
} 

div.content-column { 
    border-left: 1px solid #E8EAEC; 
    float: left; 
    margin-left: -1px; 
    padding: 15px 0 15px 10px; 
    width: 558px; 
} 

div.right-column { 
    float: right; 
    overflow: hidden; 
    width: 190px; 
} 

由於內容列和右列之間的間距爲10像素，因此縮放時模板不會摺疊。

請評論我的解決方案。

謝謝大家的參與。