Html div 向左浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9860337/
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
div floating left
提问by clankill3r
I work on a page where i want a lot of columns. The columns should float left, and there should never be a column under a column. (and if it's possible no scrollbar, just make the columns that exceed the screen impossible to access).
我在一个页面上工作，我想要很多列。列应该向左浮动，并且列下不应该有列。（如果可能没有滚动条，只需使超出屏幕的列无法访问）。
Atm, my second column goes under my first instand of next to it.
Atm，我的第二个专栏在我旁边的第一个栏目下。
<div id="container">
<div id="menu">
</div>
<div id="book">
<div id="column1" class="column_n">
</div>
<div id="column2" class="column_n">
</div>
</div>
</div>
css:
css：
body {
margin: 0;
padding: 0;
border: 0;
font-family: Verdana;
font-size: 20px;
}
.column_n {
width: 480px;
margin: 20px;
float: left;
}
采纳答案by frontsideup
Position: relative, float left (for sorting columns left to each other) overflow: hidden; for hiding the overflow of the body; auto: for wrapping using same length dimension as child element.
位置：相对，向左浮动（用于对彼此左侧的列进行排序）溢出：隐藏；用于隐藏身体的溢出；auto：用于使用与子元素相同的长度尺寸进行包装。
回答by Alex
It because you need to find the right widthand marginvalues for your divs:
这是因为您需要为您的 div找到正确的width和margin价值：
An ex:
前任：
and this is how it should be if your #bookor bodyhas a width of 960px
如果您的#book或body宽度为960px
回答by Joost
So if I understand correctly, you have a given amount of columns and only the columns that fit in the browser window should be shown.
所以如果我理解正确的话，你有给定数量的列，应该只显示适合浏览器窗口的列。
If you can set the heights of your columns (and its containers) you can use an overflow on the book div. Columns that don't fit are not shown at all (tried in chromium), if you make the browser wider they can come back. http://jsfiddle.net/rqdzK/1/
如果您可以设置列（及其容器）的高度，则可以在书籍 div 上使用溢出。不适合的列根本不会显示（在铬中尝试过），如果您使浏览器更宽，它们可以返回。 http://jsfiddle.net/rqdzK/1/
If you just want all columns to show on any size of screen you could relative widths. You make sure all widths add up to 100% (although I believe on IE 100% is too much, so take 99.5 or so). http://jsfiddle.net/MqFRB/2/
如果您只想在任何尺寸的屏幕上显示所有列，您可以使用相对宽度。您确保所有宽度加起来为 100%（虽然我认为 IE 上的 100% 太多了，所以取 99.5 左右）。 http://jsfiddle.net/MqFRB/2/
回答by Med HIJAZI
for floating left is working but height of column_n is small + for the problem scrolling
浮动左侧正在工作，但 column_n 的高度很小 + 滚动问题
回答by almathie
There does not seems to be any problem with your code, apart from the width of the div : http://jsfiddle.net/XrY8U/
除了 div 的宽度外，您的代码似乎没有任何问题：http: //jsfiddle.net/XrY8U/
I like to put background-color to my css when I debug, or use chrome dev tools to see the size of the elements.
我喜欢在调试时将背景颜色添加到我的 css 中，或者使用 chrome dev 工具查看元素的大小。
Most likely, you do not have 2*480 + 4*20 = 1040 px of width available for your columns. Usually websites are designed to be contained in 940 or 960 px.
最有可能的是，您的列没有 2*480 + 4*20 = 1040 px 的宽度可用。通常网站被设计为包含在 940 或 960 像素中。
