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：

html {font-size: 10px}

然后，如果你想要一个div为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像素缩放时模板不会折叠。

请评论我的解决方案。

谢谢大家的参与。

缩放页面（ctr + ctr-），折叠模板

2 个答案: