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

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

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

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

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

Answer 2

您应该可以使用包装div以及min-width并最终overflow执行此操作，例如：http://jsfiddle.net/5zsyj/

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

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

2 个答案: