为什么在这个例子中留下的保证金不起作用？

Question

我创建了一个简单的3列示例，如果展开另外两列，也会展开。

以下是HTML代码

<div id="outer">
    <div id="inner">
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
    </div>
    <div id="inner">
        Hello world!
    </div>
    <div id="inner">
        Hello world!
    </div>
</div>

CSS代码

#outer {
    width:500px; 
    background:#FFCCCC;
}

#inner {
    background:#FFCC33;
    padding:10px;
    width:100px;
    margin-left:25px;
    display:table-cell;
    border:1px solid #F00;
}

JSFiddle http://jsfiddle.net/KCzq3/6/

更新

在html中看到如果你增加一个div的conent，其他两个div将显示最大高div的相同高度，现在如果table-cell不起作用，那么这可能是什么解决方案不能给浮动或内联块或它会缩小

Answer 1

如果使用display:table-cell，div就像一个表，并响应表命令。

简单地将它放在#outer中，以模拟单元格间距效果：

border-spacing:25px 0;
border-collapse:separate;

http://jsfiddle.net/KCzq3/9/

Answer 2

如果您使用display:table / table-cell布局，则应使用border-spacing在元素之间设置margin /空格 DEMO

Answer 3

使用inline-block代替table-cell

<强> HTML

<div id="outer">
    <div class="inner">
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
    </div>
    <div class="inner">
        Hello world!
    </div>
    <div class="inner">
        Hello world!
    </div>
</div>

<强> CSS

#outer {
    width:500px; 
    background:#FFCCCC;
    display: table;
}

.inner {
    background:#FFCC33;
    padding:10px;
    width:100px;
    margin-left:25px;
    display:inline-block;
    border:1px solid #F00;
}

http://jsfiddle.net/KCzq3/8/

如果你想让div具有相同的高度，那么：

将#outer样式更改为：

#outer {
    width:500px; 
    background:#FFCCCC;
    border-collapse: separate;
    display: table;
    border-spacing: 12.5px 0;
}

http://jsfiddle.net/KCzq3/11/

Answer 4

<强> HTML

<div id="outer">
    <div class="inner">
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
    </div>
    <div class="inner">
        Hello world!
    </div>
    <div class="inner">
        Hello world!
    </div>
</div>

<强> CSS

#outer {
    width:500px; 
    background:#FFCCCC;
    display: table;
}

#outer:hover {
  width: 750px;
}

.inner {
    background:#FFCC33;
    padding:10px;
    width:100px;
    margin-left:25px;
    display:table-cell;
    border:1px solid #F00;
}

RESULT

正常状态

悬停

您会看到，由于width:750px CSS属性，在悬停时，所有内部类都将扩展为display: table。