缩放页面（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-），折叠模板

回答

相关问题