html - div 宽度问题

Question

我有两个内联显示的 div，每个 div 的宽度为 50%。在这两个 div 下方，有一个 100% 宽度的 div。

这是我的代码

<div class="col_1_2"></div>
<div class="full-description">description</div>
<div class="col_1_2"></div>
<div class="full-description">description</div>

.col_1_2 {
   float:left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width:50%;
 }

.full-description {
   width: 100%;
}

名为“full-description”的 div 未完美显示在“.col_1_2”下方。

我想要什么

感谢您的帮助!

Answer 1

您可能必须更改结构才能使用 float 实现该布局。

...并且不要忘记清除 float 。

.col_1_2 {
   float:left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width:50%;
    height: 100px;
    background: lightblue;
    margin-bottom: 10px;
    border:1px solid grey;
 }

.full-description {
    height: 50px;
    background: grey;
    margin-bottom: 10px;
    clear:both;
    
}

<div class="col_1_2"></div>
<div class="col_1_2"></div>
<div class="full-description">description</div>
<div class="full-description">description</div>

<div class="col_1_2"></div>
<div class="col_1_2"></div>
<div class="full-description">description</div>
<div class="full-description">description</div>