7

我正在尝试将页面布局为三列，我希望中间列随页面调整大小，但问题是如果页面非常窄，左列要么滑到中间列下方（如果我使用浮动定位列）或它重叠（如果我使用绝对定位）。一旦达到最小宽度并停止移动，我希望右栏“撞”到中间栏，此时页面应该开始显示水平滚动条。

以下是我对绝对定位的尝试：

h2 {
  margin-top: 0;
}

#leftside {
  position: absolute;
  left: 0;
  width: 200px;
}

#rightside {
  position: absolute;
  right: 0;
  width: 150px;
}

#content {
  min-width: 200px;
  margin: 0 150px 0 200px;
}
<div id="leftside">
  <ul>
    <li><a href="">Left Menu 1</a></li>
    <li><a href="">Left Menu 2</a></li>
  </ul>
</div>
<div id="rightside">
  <ul>
    <li><a href="">Right Item 1</a></li>
    <li><a href="">Right Item 2</a></li>
  </ul>
</div>
<div id="content">
  <h2>Content Title</h2>
  <p>Some paragraph.</p>
  <h2>Another title</h2>
  <p>Some other paragraph with total nonsense. Just plain old text stuffer that serves no purpose other than occupying some browser real-estate</p>
</div>

4

2 回答 2

6

您应该能够使用包装器div以及min-width最终来做到这一点overflow，例如：http: //jsfiddle.net/5zsyj/

尝试重新调整窗口大小，如果列是< 300px，它将显示滚动条，而不是仅仅调整元素本身的大小，或者浮动在彼此之上。

于 2013-01-27T23:04:11.723 回答
6

一个解决方案是将其添加到 CSS 中：

html {
min-width: 550px;
position: relative;
}

演示：http: //jsfiddle.net/4PH4B/

基本思想是，当页面达到所有列宽度的总和时，它不应再缩小，而只显示滚动条。还有位置：相对；声明用于将第三列与 html 内容的右侧对齐，而不仅仅是窗口。

于 2013-01-27T23:08:55.057 回答