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

我有三列固定寬度的頁面佈局。看到下面的代碼片段的HTML和CSS縮放頁面（ctr + ctr-），摺疊模板

在某些分辨率的顯示器（特別是在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; 
}

來源

2011-11-24 golsear

現在可能不會，但這最終是我們要去的地方：http://www.alistapart.com/articles/responsive-web-design/ – moey

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

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

html {font-size: 10px}

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

來源

2011-11-24 23:23:27 austincheney

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

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像素，因此縮放時模板不會摺疊。

請評論我的解決方案。

謝謝大家的參與。

來源

2011-11-25 08:14:17 golsear

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

回答

相關問題