CSS 将两个 div 并排放置答案

【问题标题】：CSS placing two divs next to anotherCSS 将两个 div 并排放置
【发布时间】：2013-12-18 17:05:48
【问题描述】：

我正在尝试使用 div 构建模板。

顶部 div 宽度 100%，没有问题。

在左侧和右侧下方都有一个 200px 的小 div 在由两列组成的主容器之间，都是剩下的 50%。

我的问题是这两列占视口的 50%，所以第二列放在主视图下面。

HTML：

<div id="top">
    <div class="but">top 1234</div>
    <div class="but">top 5678</div>
    <div class="but">top 91011</div>
    <div class="but">top 121314</div>
</div>
<div id="middle">
    <div id="butsRight">
        <div class="butv">right1234</div>
        <div class="butv">right567</div>
        <div class="butv">right8910</div>
    </div>
    <div id="butsLeft">
        <div class="butv">left1234</div>
        <div class="butv">left5678</div>
        <div class="butv">left91011</div>
    </div>
    <div id="middleMain">
        <div id="middleMainL">
            <div id="middleMainLb">LEFT QQQQQ
                <br>CCCCC
                <br>hhhhhh</div>
            <div id="middleMainLm">
                <table width=100% height=100% border=2>
                    <tr>
                        <td>&nbsp;&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </div>
            <div id="middleMainLo">LEFT
                <p>eee</p>
                <p>fff</p>
                <p>ggg</p>
                <p>hhh</p>
            </div>
        </div>
        <!--middleMainL -->
        <div id="middleMainR">
            <div id="middleMainRb">RIGHT QQQQQ
                <br>CCCCC
                <br>hhhhhh</div>
            <div id="middleMainRm">RIGHT
                <p>aaaa</p>
                <p>bbbb</p>
                <p>cccc</p>
                <p>dddd</p>
                <p>aaaa</p>
                <p>bbbb</p>
                <p>cccc</p>
            </div>
            <div id="middleMainRo">RIGHT
                <p>eee</p>
                <p>fff</p>
                <p>ggg</p>
                <p>hhh</p>
            </div>
        </div>
        <!--middleMainR -->
    </div>
    <!-- middlemain -->
</div>
<!-- middle -->

CSS：

body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
#top {
    margin-right: 80px;
    background-color: green;
    width: 100%;
    text-align: center;
}
.middle {
    width: 100%;
    height: 100%;
    background-color: yellow;
}
#butsLeft {
    height: 100%;
    width: 200px;
    float: left;
    background-color: green;
}
#butsRight {
    height: 100%;
    width: 200px;
    float: right;
    background-color: green;
}
#middleMain {
    background-color: gray;
    width:100%;
    height:100%;
}
#middleMainL {
    width:50%;
    float: left;
    background-color: black;
}
#middleMainR {
    width:auto;
    float: left;
    background-color: brown;
}
#middleMainLb {
    width: 100%;
    float: center;
    background-color: green;
    text-align: center;
}
#middleMainLm {
    width: 100%;
    float: center;
    background-color: purple;
    text-align: center;
    overflow: visible;
}
#middleMainLo {
    width: 100%;
    float: center;
    background-color: green;
    text-align: center;
}
#middleMainRb {
    width: 100%;
    float: center;
    background-color: green;
    text-align: center;
}
#middleMainRm {
    width: 100%;
    float: center;
    background-color: purple;
    text-align: center;
}
#middleMainRo {
    width: 100%;
    float: center;
    background-color: green;
    text-align: center;
}
div.but {
    text-align: center;
    width: 200px;
    background-color: orange;
    position: absolut;
    display:inline-block;
}
div.butv {
    text-align: center;
    width: 200px;
    background-color: orange;
    position: absolut;
    height: 33%;
}

【问题讨论】：

帮我一个忙，你用油漆或其他东西画出布局，然后我会为你做它+解释它。我讨厌像你这样乱七八糟的代码，所以我不会去碰它。
@casthegohst : 伙计...它太乱了....整理一下，你会回答书房的！ :)
对不起，伙计们......这是我在这里的第一个问题......而且@ruddy 还不允许放置照片。这就是我把它放在这里的原因 [link] consult4.nl/even/plane.gif 希望这个 clesrs 有所改善

标签： css

【解决方案1】：

是的，我看了一下，这就是我想出的。请仔细研究一下以了解代码。它相当简单。

HTML：

<div id="header">Header</div>
<div id="right">Right Side Bar: Fixed width.</div>
<div id="left">Left Side Bar: Fixed width.</div>
<div id="content">
    <div>
        <div id="middleleft">Middle Left</div>
    </div>
    <div>
        <div id="middleright">Middle Right</div>
    </div>
</div>

CSS：

html, body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
* {
    box-sizing:border-box;
}
#header {
    width: 100%;
    height: 100px;
    background: red;
}
#right, #left {
    width:200px;
    height: 500px;
    float:left;
    background:orange;
}
#right {
    float:right;
}
#content {
    overflow:hidden;
    height: 500px;
}
#content > div {
    width: 50%;
    height: 100%;
    float:left;
}
#middleleft {
    float:left;
    height:100%;
    width:100%;
    background: blue;
}
#middleright {
    float:left;
    height:100%;
    width:100%;
    background: green;
}

DEMO HERE

【讨论】：

非常感谢@Ruddy 我会看看#content > div 部分...我想这就是我所缺少的！
Np，这就是你正在寻找的布局，所以我说弄乱它甚至使用它，你应该一切都好！如果这确实回答了您的问题 +1 并将其选为正确答案，我们将不胜感激。有关此的任何问题，请告诉我，我会尽力帮助您。
因为这是我的第一个问题，无法给其他人答案，所以我还不能投票...不过对您的回答非常满意....
很高兴您对此感到满意，您应该能够接受答案。在我的答案旁边打勾。

【解决方案2】：

我不知道我为什么这样做，但这就是你想要的（也许？因为我没有真正理解这个问题）

http://jsfiddle.net/KTd8T/1/

当你在做你的 CSS 时，当 example 是一个 div 时，你正在做一些 .example。如果是 div 则输入 #，如果是类则输入 "."

现在您可以处理此副本，并尝试编写清晰的代码。

还有一点：你正在做一个顶部和中间的内容，但你没有底部的内容。也许这就是为什么它不像你想要的那样显示？

感谢您编辑您的帖子并尝试更明确！

【讨论】：