CSS将两个div放置在另一个div旁边

我正在尝试使用divs构建一个模板

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

在左边和右边的下方是一个小div，都是200px 在由两列组成的主容器之间，两列均为剩余容量的50%

我的问题是这两个柱的大小为视口的50%，因此第二列被放置在主视图下。

HTML:

---

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

当你在做css的时候，你在做一些。例如，当例子是一个div时。如果它是一个div，那么把它放到

#

，如果它是一个类put“

现在您可以处理这个副本，只需尝试编写清晰的代码

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

---

感谢您编辑您的文章，并尝试更明确

对，我看了一下，这就是我想到的。请仔细研究一下以理解代码。这相当直截了当

HTML:

---

帮我一个忙，你用油漆或别的什么东西画出布局，然后我给你做+解释。我讨厌像你这样乱七八糟的代码，所以我不会去碰它。@casthegohst:伙计……它太乱了……整理一下，你就得回答den！！：）对不起，伙计们。。这是我在这里的第一个问题。。。还有@ruddy还不允许放照片。这就是为什么我把它放在这里[link]希望这个clesrs的东西向上很多@Ruddy我会看看#content>div部分。。。我想这就是我错过的！Np，这就是你正在寻找的布局，所以正如我所说的，摆弄它，甚至使用它，你应该都很好！如果这确实回答了您的问题+1，并选择它作为正确答案将不胜感激。关于这个问题，请让我知道，我会尽力帮助你。因为这是我的第一个问题，不能给别人答案，我还不能投票。。。很高兴你对这个答案感到满意，你应该能够接受这个答案。在我的答案旁边打勾。

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

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

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

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