如何将 div 放置在彼此旁边和下方？答案

【问题标题】：How to position divs next to each other and under each other?如何将 div 放置在彼此旁边和下方？
【发布时间】：2014-01-12 11:12:19
【问题描述】：

这可能是一个愚蠢的问题，而且很容易解决，但我在这样做时遇到了麻烦。我的问题是，如何将最后两个部分（如图所示）放在第一个部分下方？

http://imageshack.us/photo/my-images/829/63128947.jpg/

这是我的代码：

#main_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
border: 1px solid black;
max-width: 1000px;
}

#main_section{
width: 600px;
height: 450px;
border: 1px solid black;
padding: 5px;
margin: 10px;
}

#sub_section1{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}

#sub_section2{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}

#sub_section3{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}

#sub_section4{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}

【问题讨论】：

在#main_div 内的所有元素上使用float: left 并约束#main_div 以使这两个元素没有足够的空间，然后它们将换行到下一行。另一种选择是使用 nth-child 伪选择器，而不是按 ID 选择。
阅读此内容：amazon.com/Head-First-HTML5-Programming-JavaScript/dp/… 在 HTML 方面打下良好的基础要快得多，而且要容易得多，而不是一直撞墙学习。

标签： css html positioning

【解决方案1】：

Here's a fiddle 演示了一种方法。我只是添加了另一个div 元素（我称之为“侧边栏”），并将较小的divs 放入其中。每个元素都是浮动的，侧边栏容器的宽度足以容纳这些元素。您可能需要在 fiddle 中调整视口的大小，以使内容按照屏幕截图中的方式流动。

由于您较小的 div 元素的样式都相同，因此我选择使用一个类而不是多个 ID。这样您就不会在 CSS 中不必要地重复规则。

另外请注意，如果您喜欢这种事情，这也可能通过绝对定位来实现。在 CSS 中通常有多种处理方式。

【讨论】：

【解决方案2】：

我刚刚添加了另一层包含 div 并将它们命名为 section_top/bottom。由于 div 是块元素，它应该将其他两个向下推。我还稍微清理了样式:-)。

fiddle

代码：

<html>
    <head>
        <style>
            #main_div{
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                border: 1px solid black;
                max-width: 1000px;
                padding: 5px;
                margin: 10px;
            }

            #main_section{
                width: 600px;
                height: 450px;
                border: 1px solid black;
            }

            .subsection {
                width: 100px;
                height: 200px;
                border: 1px solid black;
                padding: 5px;
                margin: 10px;
                -webkit-box-flex: 1;
            }
        </style>
    </head>
    <body>
        <div id="main_div">
            <div id="main_section">

            </div>
            <div id="section_top">
                <div id="sub_section1" class="subsection">

                </div>
                <div id="sub_section2" class="subsection">

                </div>
            </div>
            <div id="section_bottom">
                <div id="sub_section3" class="subsection">

                </div>
                <div id="sub_section4" class="subsection">

                </div>
            </div>
        </div>
    </body>
</html>

【讨论】：