CSS 如何防止 HTML 元素相互重叠或滑动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14553273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I prevent HTML elements from overlapping or sliding under one another?
提问by adaj21
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>采纳答案by Zar
You should be able to do this using a wrapper divalong with min-widthand eventually overflow, such as: http://jsfiddle.net/5zsyj/
您应该能够使用包装器div和min-width并最终做到这一点overflow，例如：http: //jsfiddle.net/5zsyj/
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.
尝试重新调整窗口大小，如果列是< 300px，它将显示滚动条，而不仅仅是调整元素本身的大小，或者浮动在彼此之上。
回答by Mario Vlad
A solution would be to add this to the CSS:
一个解决方案是将其添加到 CSS 中：
html {
min-width: 550px;
position: relative;
}
demo: http://jsfiddle.net/4PH4B/
演示：http: //jsfiddle.net/4PH4B/
The basic idea is that when the page reaches the sum of all the column's widths it should no longer shrink, instead just show the scroll bar. Also the position: relative; declaration is there to align the third column to the right side of the html content, not just the window.
基本思想是，当页面达到所有列宽度的总和时，它不应再缩小，而只显示滚动条。还有位置：相对；声明是为了将第三列与 html 内容的右侧对齐，而不仅仅是窗口。
