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/

这正是我想要的，但我不知道如何摆脱各个街区之间的空间。

我还尝试将每个元素设置为＆＃34; float：left＆＃34;而不是＆＃34;显示：inline-table＆＃34;，这几乎就是我想要的 - 但是黄色背景的父母因为某些原因不会被吸引到元素后面（I希望父元素在元素后面绘制）：

http://jsfiddle.net/kbR8P/

由于

Answer 1

添加margin-left: -5px，将元素移到左侧。

Answer 2

在第二个示例（使用浮点数）中将overflow: hidden添加到包含（黄色）<div>。

Answer 3

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

Answer 4

使用display：inline-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>

否则你应该试试这个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>

没有空格的内联div并且在所有后面都有父div

4 个答案: