CSS显示表

Question

不幸的是，左表格单元位于页面下方而不是与其相邻的表格单元格，我不明白为什么。

HTML

<div id="cmo">
    <div style="display: table-row;">
        <div class="table-cell" id="psycho_oben_links">
             <h3>Hello world!</h3> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="table-cell" id="trenner1">&nbsp;</div>
        <div class="table-cell" id="trenner2">&nbsp;</div>
        <div class="table-cell" id="psycho_oben_rechts">
            <img src="http://bit.ly.example/1j77AoG" alt="">
        </div>
    </div>
</div>

CSS

#cmo {
    display: table;
}
#trenner1 {
    border-right: 0px solid #aaa;
}
#trenner2 {
    border-left: 1px solid #aaa;
}
.tableee {
    display: table;
}
.table-cell {
    display: table-cell;
}

JsFiddle

Answer 1

默认情况下，表格单元格的垂直对齐方式为基线，根据所需效果将其更改为顶部，中间或底部。只是保持一致。

.table-cell {
    display: table-cell;
    vertical-align: top;
}

http://jsfiddle.net/LuyxH/