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