越过最小宽度点的水平滚动条答案

【问题标题】：Horizontal scrollbar past the min-width point越过最小宽度点的水平滚动条
【发布时间】：2010-12-15 18:08:15
【问题描述】：

HTML：

<div id="mcolWrapper">
    <div id="mcol">
      <div class="wrapper">
      content
      </div>
    </div>
</div>

<div id="lcol">
    <div class="wrapper">
    content
    </div>
</div>

<div id="rcol">
    <div class="wrapper">
    content
    </div>
</div>

CSS：

#mcolWrapper {
    float: left;
    width: 100%; }

#mcol { margin: 0 295px 0 235px; min-width: 500px; }

#lcol {
    float: left;
    width: 235px;
    margin-left: -100%; }

#rcol {
    float: left;
    width: 290px;
    margin-left: -295px;

我想在中心列上设置一个最小宽度，这样它就不会缩小太多并且超过这个最小宽度点，我希望浏览器显示一个水平滚动条，而不是右列与中心列重叠。

【问题讨论】：

标签： html css layout column-width

【解决方案1】：

你可以试试 jQuery splitter 插件。当我需要列布局时，我会使用它，因为它在抽象浏览器差异方面比 CSS 模板做得更好，而且它可以完美地处理滚动条。

http://methvin.com/splitter/

【讨论】：

3-col 拆分器几乎是我想要的，但它仍然没有添加水平滚动条，只是在视口宽度
我很确定有一个设置可以让您拥有水平滚动条。确保在列 div 上将溢出属性设置为自动。

【解决方案2】：

min-width 不是完全支持的 css 属性。在您的情况下，解决此问题的一种简单方法是在列底部添加一个宽度等于您的最小宽度值的 div。

<div id="mcol">
  ...
  <div style="width:500px;"></div>
</div>

这将导致列无法缩小。希望对您有所帮助！

【讨论】：

很好的提示，谢谢，但也有针对 min-width 的技巧。这里的问题主要是在最小宽度点之外，right-col 与 center-col 重叠，而我想要一个水平滚动条来启动。可能吗？