Question

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;

我想在中心列上设置最小宽度，使其不会缩小太多并超过此最小宽度点，我希望浏览器显示水平滚动条而不是右列与中心列重叠。< / p>

Answer 1

您可以尝试使用jQuery splitter插件。这是我在需要列布局时使用的，因为它比CSS模板更好地抽象浏览器差异，并且它可以完美地处理滚动条。

http://methvin.com/splitter/

Answer 2

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

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

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

水平滚动条经过最小宽度点

2 个答案: