Div浮动到左侧

Question

我在制作一个需要很多列的页面。 这些列应该向左浮动，而且不应该有列出现在另一列下面。 （如果可能的话，不要出现滚动条，直接让超出屏幕的列不可访问）。 目前，我的第二列已经出现在了第一列下面，而不是旁边。

<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：

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Verdana;
    font-size: 20px;

}

.column_n {
    width: 480px;
    margin: 20px;
    float: left;
}

- clankill3r

---

它们会并排显示给我看。http://jsfiddle.net/hTJnX/。只需确保“结果”面板足够宽，以容纳两个 div。 - Ayush

Answer 1

因为你需要找到适合你的div的正确的宽度和边距值：

一个例子：

http://jsfiddle.net/e9a7w/1/

这就是如果你的 #book 或 body 的宽度为 960px 时应该是什么样子的。

http://jsfiddle.net/e9a7w/2/

- Alex

Answer 2

定位：相对定位，左浮动（用于将列排序到彼此左侧） 溢出：隐藏主体的溢出部分； 自动：使用与子元素相同长度维度进行换行。

- frontsideup

---

我猜你需要考虑使用overflow-x和overflow-y属性。请查看w3Schools获取更多信息。 - frontsideup

Answer 3

浮动左侧是有效的，但 column_n 的高度较小，同时存在滚动问题。

- Med HIJAZI

Answer 4

你的代码似乎没有任何问题，除了 div 的宽度： http://jsfiddle.net/XrY8U/

我喜欢在调试时给我的 CSS 添加背景颜色，或使用 Chrome 开发工具查看元素的大小。

很可能，你没有 2*480 + 4*20 = 1040 像素的宽度可用于你的列。通常网站设计为包含在 940 或 960 像素内。

- almathie

Answer 5

如果我理解正确，您有一定数量的列，只有适合浏览器窗口的列才应该显示。

如果您可以设置列（及其容器）的高度，则可以在书籍div上使用溢出。不适合的列根本不会显示（在chromium中尝试过），如果您使浏览器变宽，它们可以回来。 http://jsfiddle.net/rqdzK/1/

如果您只想在任何屏幕大小上显示所有列，则可以使用相对宽度。您确保所有宽度加起来为100％（尽管我认为在IE上100％太多了，因此请取99.5左右）。 http://jsfiddle.net/MqFRB/2/

- Joost