1

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

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

2 回答 2

2

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

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

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

于 2013-02-15T20:54:36.467 回答
-1

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

小提琴

代码：

<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>
于 2013-02-15T21:00:27.743 回答