发布与div宽度

我有两个div内联显示，每个div的宽度为50％。在这两个div下面，有一个100％宽度div。发布与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没有完全显示下面的” .col_1_2" 。

我想要什么

enter image description here

感谢您的帮助！

来源

2015-05-04 user3653409

什么是你的电流输出？请张贴Jsfiddle链接。 –

您可能必须更改结构以使用浮动来实现该布局。 –

你可能将不得不改变结构采用浮动实现这一布局。

...并且不要忘记清除漂浮物。

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

来源

2015-05-04 11:58:08

这是由于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>

在您的首选语言，当然

来源

2015-05-04 11:46:56 bytecode77

每一行后添加此

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

然后风格这个

 .clearfix { 
      clear:both; 

     }

而且浮动这一个

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

希望这将工作

来源

2015-05-04 11:47:35

发布与div宽度

回答

相关问题