Question

我是CSS的新手，所以我希望你能帮助我。

我有一个内有3个DIV的DIV（左DIV，中心DIV，右DIV）

我可以单独放置我想要的背景（DIV DIV）但是，因为它们不在一起，所以它们之间存在颜色差距。所以我试着将相同的背景颜色放在包含三个的DIV中，但它只是不起作用。

你能帮帮我吗？

非常感谢！

Html

<!--Divs-->
<!--<div class="cor_fundo">-->
<div class="body_resize">
  <div class="left">
   left
  left left left left left left left left left  left left left left ddddddddd</div>
  <div class="center">
  center
  ccccccccccccccc</div>
  <div class="right">
  right rrrrrrrrrrrrrrrrrrrr  </div>
  <div class="clr"></div>
</div>
<!--</div>-->
<!--FIM - Divs-->

CSS

<!-- Divs Topo Pagina-->
.body_resize  { padding:0; width:740px; margin:0 auto; background-color:#fff} -> this is the one that dont works

.right { width:130px;margin:0; padding:10px; float:right; background-color:#99CCFF}
.center {width:150px;margin:0; padding:10px; float:left; background-color:#99CCFF}
.left {width:400px;margin:0; padding:10px; float:left; background-color:#99CCFF}
<!-- FIM - Divs Topo Pagina-->

演示：http://jsfiddle.net/Iuppiter/c8dY8/

Answer 1

我已经定制了你的css ..请参阅下面的

HTML结构：

<div class="body_resize">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>

的CSS：

.body_resize  { padding:0; width:740px; margin:0 auto; background-color:#99CCFF; display:table;} 
.right { width:130px;margin:0; padding:10px;display:table-row; float:left; }
.center {width:150px;margin:0; padding:10px;display:table-row ; float:left;}
.left {width:400px;margin:0; padding:10px; display:table-row; float:left; }

JsFiddle链接：http://jsfiddle.net/6uXwZ/

Answer 2

.body_resize { padding:0; margin:0 auto; background-color:#99CCFF; }
.right { width:130px;margin:0; padding:10px; float:right; }
.center { width:150px;margin:0; padding:10px; float:left; }
.left { width:400px;margin:0; padding:10px; float:left; }
.clr { clear:both; } /* i think u missed this */

http://jsfiddle.net/c8dY8/2/

顺便说一句，如果你想在css文件中发表评论，请使用/* ... */代替。

Answer 3

我刚刚添加了

display：table to class body_resize

<强> HTML

<div class="body_resize">
  <div class="left">
   left
  left left left left left left left left left  left left left left ddddddddd</div>
  <div class="center">
  center
  ccccccccccccccc</div>
  <div class="right">
  right rrrrrrrrrrrrrrrrrrrr  </div>
  <div class="clr"></div>
</div>

<强> CSS

.body_resize  {
    margin:0px auto;
     padding:0;
    width:1000px;
        display:table;
     background-color:black;
}

.right { 
    width:250px;
    margin:0px;
    padding:10px;
    float:right;
    text-align:center;
    display:inline:block;
    background-color:red;
}
.center {
    width:250px;
    margin:0;
    padding:10px;
    float:left; 
    text-align:center;
    background-color:green;
    display:inline-block;
}
.left {
    width:250px;
    margin:0; 
    padding:5px;
    float:left;
    display:inline:block;
    background-color:#99CCFF}

小提琴DEMO

着色DIV的背景

3 个答案: