问题
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;
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.
回答1:
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/
回答2:
min-width is not a fully supported css property. An easy way around this in your situation would be to simply add a div at the bottom of the column that has a width equal to your minimum width value.
<div id="mcol">
...
<div style="width:500px;"></div>
</div>
This will cause the column to not be able to shrink any smaller. Hope that helps!
来源:https://stackoverflow.com/questions/1720017/horizontal-scrollbar-past-the-min-width-point