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/

这几乎正​​是我想要的，但我不知道如何摆脱块之间的空间。

我还尝试将每个元素设置为“float:left”而不是“display:inline-table”，这几乎正是我想要的 - 但是黄色背景的父级不会被绘制在元素后面一些原因（我希望将父级绘制在元素后面）：

http://jsfiddle.net/kbR8P/

谢谢

Answer 1

addmargin-left: -5px将元素向左移动。

Answer 2

添加overflow: hidden到第二个示例中的包含（黄色）<div>（带有浮动）。

Answer 3

display: table-cell;代替display:inline-table;

Answer 4

使用显示：内联块；将解决您的问题。
如果你想让黄色背景填满屏幕的整个宽度，那么试试这个<a href="http://jsfiddle.net/kbR8P/1/" rel="nofollow">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>

否则你应该试试这个小提琴

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

​</p>