如何防止HTML元素相互重叠或滑动? [英] How can I prevent HTML elements from overlapping or sliding under one another?

问题描述

我正在尝试将页面分为三列，我希望中间的列随页面调整大小，但是问题是，如果页面非常狭窄，则左边的列会滑到中间的列下方(如果我使用浮动以定位列)或与它重叠(如果我使用绝对定位).我希望右列在达到最小宽度后会撞到"中间的那一列并停止移动，这时页面应该开始显示水平滚动条.

I am trying to layout a page in three columns, I want the middle column to resize with the page but the problem is that if the page is made very narrow, the left column either slides below the middle one (if I use float to position the columns) or it overlaps it (if I use absolute positioning). I want the right column to "bump" into the middle one once that one's min width is reached and stop moving, at this point the page should start showing a horizontal scroll bar.

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

Following is my attempt with absolute positioning:

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>

推荐答案

您应该能够使用包装器div以及min-width并最终使用overflow，例如:

You should be able to do this using a wrapper div along with min-width and eventually overflow, such as: http://jsfiddle.net/5zsyj/

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

Try re-sizing the window, if the column is < 300px, it will show scroll-bars instead of just resizing the elements themselves, or floating above eachother.

这篇关于如何防止HTML元素相互重叠或滑动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！