Question

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

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;
}

Answer 1

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

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

另请注意，如果您涉及到这种情况，这也可能通过绝对定位来实现。 CSS中通常有多种处理方式。

Answer 2

我刚刚添加了另一层conatining 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>

如何将divs彼此相邻并在彼此之下？

2 个答案: