超过最小宽度点的水平滚动条 [英] Horizontal scrollbar past the min-width point

问题描述

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>

I want to set a minimum width on the center column so it cannot shrink too much and past this minimum width point, I'd like the browser to display a horizontal scroll bar instead of the right column overlapping the center column.

推荐答案

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

You could try the jQuery splitter plugin. It's what I use when I need a column layout, because it does a better job of abstracting away the browser differences than CSS templates do, and it handles the scrollbars flawlessly.

http://methvin.com/splitter/

这篇关于超过最小宽度点的水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！