水平滚动过去的最小宽度点

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; 

我想设置在中心柱的最小宽度，因此不能缩小太多，过去这个最低宽度点，我希望浏览器显示一个水平滚动条，而不是右侧列与中央列重叠。

Answer 1

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

http://methvin.com/splitter/

Answer 2

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

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

这将导致列不能缩小。希望有所帮助！