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

div称为“完整描述＆＃39;并未完美地显示在＆＃34; .col_1_2＆＃34;。

下方

我想要什么

感谢您的帮助！

Answer 1

您可能需要更改结构以使用浮动来实现该布局。

......别忘了清理漂浮物。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为DIV之后的换行。它们被解释为空格，因此您要避免这些。试试这样的事情

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

用您的首选语言

Answer 3

在每一行之后添加

      <div class="clearfix"></div>

然后设置为

      .clearfix {
            clear:both;

         }

并且还浮动这个

     .full-description {
       float:left;
       width:100%;
       }

希望这会有用