如何在CSS中安排div容器？

Question

所以我的网站有几个div容器，它们按如下方式垂直堆叠： 我希望它看起来更像这样： 我的HTML看起来像这样：

<div id="main">
            <div id="header">
            </div>
            <div id="content">
                <div id="game" class="box">
                    <canvas data-processing-sources="hello-web.pde"></canvas>
                </div>
                <div id="desc_down"> <!-- Description and Downloads -->
                    <div id="desc" class="box"> <!-- Description -->

                    </div>
                    <div id="down"> <!-- Downloads -->
                        <div id="windows" class="box">
                        </div>
                        <div id="mac" class="box">
                        </div>
                        <div id="linux" class="box">
                        </div>
                        <div id="code" class="box">
                        </div>
                        <div id="info" class="box">
                        </div>
                    </div>
                </div>
                <div id="screenshots" class="box">

                </div>
                <div id="tech_about">
                    <div id="tech" class="box">

                    </div>
                    <div id="about" class="box">

                    </div>
                </div>
            </div>
        </div>
    <div>

和我的CSS一样：

#main {
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
    background-color: #b0e0e6; /* all colours temp */
}

#header, #content, #game, #desc_down, #screenshots, #tech_about, #info {
    width: 100%;
}
#desc {
    width: 60%;
}
#down {
    width: 40%;
}
#windows, #mac, #linux, #code {
    width: 50%;
}
#about {
    width: 45%;
}
#tech {
    width: 50%;
}
.box {
    background-color: #FFFFFF;
    border: 5px solid;
    border-color: #000000;
    height: 200px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

这些盒子的高度可以而且会改变。我想知道如何使我的网站看起来像是想要它。谢谢。

Answer 1

全部float:left或display:inline-block。 或者更好地使用...... Bootstrap Grid system

Answer 2

有无数种方式来定位您的内容。以下是使用浮点数可以实现的示例。

Have an example!

HTML

<div id="wrap">
    <div id="header"></div>
    <div id="paneOne"></div>
        <div class="minPane"></div>
        <div class="minPane"></div>
        <div class="minPane"></div>
        <div class="minPane"></div>
        <div id="wideMinPane"></div>
    <div id="afterMini"></div>
</div>

CSS

#wrap {
    width: 800px;
    margin: 0 auto;
}
#header {
    height: 200px;
    background: #F00;
}
#paneOne {
    width: 400px;
    height: 500px;
    background: #000;
    float: left;
}
.minPane {
    float: left;
    width: 198px;
    height: 200px;
    background: #FF0;
    border: solid 1px #000;
}
#wideMinPane {
    float: left;
    background: #F00;
    border: solid 1px #000;
    height: 90px;
    background: #FF0;
    width: 398px;
}
#afterMini {
    height: 300px;
    background: #F00;
    clear: left;
}

Answer 3

简单。将容器div的宽度（包含所有这些div块）设置为某个值。

然后给浮动：留给所有内部div。