html - 没有空格的内联 div 并在所有后面呈现父 div

Question

我试图在水平行中获得三个 div。每个 div 都有不同的高度。我想要他们的父元素(黄色)。这是我拥有的最接近的东西:

<div style="background-color: yellow;">
    <div style="display:inline-table; background-color:red; width:50px; height:50px;">aaa</div>
    <div style="display:inline-table; background-color:green;">
       <div>bbbbb</div>
       <div>ccccc</div>
    </div>
    <div style="display:inline-table; background-color:blue;">ddddd</div>
</div>

http://jsfiddle.net/UuZeM/1/

这正是我想要的，但我不知道如何去掉 block 之间的空间。

我也试过将每个元素设置为“float:left”而不是“display:inline-table”，这几乎正是我想要的——但是黄色背景的父元素不会被绘制在出于某种原因的元素(我希望将父元素绘制在元素后面):

http://jsfiddle.net/kbR8P/

谢谢

Answer 1

使用显示:内联 block ；将解决您的问题。
如果你想让黄色背景填满 屏幕的整个宽度然后试试这个 fiddle

<div style="background-color:yellow; display:inline-block; width:100%;">
  <div style="float:left; background-color:red; width:50px; height:50px;">aaa</div>
  <div style="float:left; background-color:green;">
    <div>bbbbb</div>
    <div>ccccc</div>
  </div>
  <div style="float:left; background-color:blue;">ddddd</div>
</div>

else 你应该试试这个 Fiddle

<div style="background-color:yellow; display:inline-block;">
  <div style="float:left; background-color:red; width:50px; height:50px;">aaa</div>
  <div style="float:left; background-color:green;">
    <div>bbbbb</div>
    <div>ccccc</div>
  </div>
  <div style="float:left; background-color:blue;">ddddd</div>
</div>