不幸的是,左侧表格单元格的位置比与其相邻的表格单元格更靠下,我不明白为什么。
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"> </div>
<div class="table-cell" id="trenner2"> </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;
}
最佳答案
默认情况下,表格单元格的垂直对齐方式是基线,根据所需的效果将其更改为顶部、中间或底部。只要保持一致即可。
.table-cell {
display: table-cell;
vertical-align: top;
}
关于html - CSS显示表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21356749/