将两个div放在第三个顶部

Question

我不擅长处理CSS和Div。

基本上我想做这样的事情：

编辑：我试过清楚：左;但由于某种原因，我的底部div现在远离其他div。像这样：

Answer 1

<div style="width:50%; float:left">Hello</div>
<div style="width:50%; float:left">Hello</div>
<div style="clear:left">Hello</div>

对于边缘和边框，就像您的情况一样，我必须知道，如果您可以使用固定宽度。

修改

这是一个带有填充，边距和边框的高级版本：

<div class="col">Left</div>
<div class="col right">Right</div>
<div class="full">Bottom</div>

CSS

div {
    border: 1px solid black;
    padding: 1%;
    margin-bottom: 2%;
}

.col {
    width: 47%;
    float: left;
}

.right {
    float: right;
}


.full {
    clear: both;
}

您可以查看jsFiddle以查看其实际效果。

Answer 2

使用浮动div和容器非常简单：

<div class="columns">
    <div class="left">
        <!-- left div -->
    </div>
    <div class="right">
        <!-- right div -->
    </div>
</div>
<div>
    <!-- bottom div -->
</div>

样式：

.left {
    float: left;
    width: #number#px;
}
.right {
    float: right;
    width: #number#px;
}
.columns {
    overflow: hidden;
}

希望这对你有意义。

Answer 3

CSS

.top
{
    width: %50;
    float: left;
}
.bottom
{
    clear left;
}

标记

<div id="containter">
    <div class="top">HELLO</div>
    <div class="top">HELLO</div>
    <div class="bottom">HELLO</div>
</div>