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;

我想设置在中心柱的最小宽度,因此它不能收缩太多,过去该最小宽度点,我想浏览器显示水平滚动条,而不是右列重叠的中间列的

有帮助吗?

解决方案

您可以尝试的jQuery插件分流。这是我用的时候,我需要一个栏布局,因为它抽象掉比CSS模板做浏览器的差异的一个更好的工作,它完美地处理滚动条。

http://methvin.com/splitter/

其他提示

最小宽度不完全支持的CSS属性。解决此在您的情况的一个简单方法是简单地在具有的宽度等于您的最小宽度值的列的底部添加一个div。

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

这将导致塔不能够收缩任何较小。希望帮助!

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top