如何防止HTML元素重叠或相互滑动？

Question

我试图在三列中布局页面,我希望中间列调整页面大小,但问题是如果页面非常窄,左列要么滑到中间一列(如果我使用浮点定位)列)或它重叠(如果我使用绝对定位).一旦达到最小宽度并停止移动,我希望右列"碰撞"到中间一列,此时页面应该开始显示水平滚动条.

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

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>

Answer 1

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

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

Answer 2

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

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

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

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