Div：float后不显示背景颜色

Question

我需要在彼此旁边显示两个<div>并且具有不同的背景。

很遗憾，第二个background-color的{​​{1}}会被忽略。我看过一些帖子，人们建议添加<div>。不幸的是，它没有帮助。有什么方法可以获得clear:both;的{​​{1}}吗？

CSS：

background-color

HTML：

.div2

Answer 1

只需为下面的div2 css添加float：left，以背景颜色显示彼此相邻的两个div

.div2{margin-top:10px;width:374px;float:left;background:green;padding:0 10px 10px 0;}

Answer 2

好吧，我想我理解你的问题。你希望元素彼此相邻。

这是一个CSS：

.div1 {  
    float:left;
    background:blue;
    width:382px;
    padding:0 5px 10px 10px;

}
.div2 {
    /* div1 will follow this */
    margin-top:10px;
    /* width of div1 + it's paddings */
    margin-left:397px; 
    width:374px;
    background:red;
    padding:0 10px 10px 0;
}
.clear {
    clear:both;
}

这是一个演示：http://jsfiddle.net/rvuyH/2/

Answer 3

我刚刚更改了@ user3401335

给出的代码

JS FIDDLE DEMO。请检查出来

HTML：

 <div class="div1">DIV1</div> 
 <div class="div2">DIV2</div>
 <div class="clear"></div>

CSS：

.div1 {
   margin-top:10px;
   float:left;
   background:blue;
   width:50%;
   padding:0 5px 10px 10px;
 }
.div2 {
   margin-top:10px;
   width:45%;
   background:red;
   padding:0 10px 10px 0;
   float:left;
}