html - CSS显示表

标签 html css css-tables

不幸的是,左侧表格单元格的位置比与其相邻的表格单元格更靠下,我不明白为什么。

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

最佳答案

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

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

http://jsfiddle.net/LuyxH/

关于html - CSS显示表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21356749/

相关文章:

javascript - (CSS-Javascript-Jquery) 如何为轮播制作缩略图 slider ?

html - Bootstrap 下拉菜单部分被表格单元格隐藏

html - 使用 divs 而不是 tables 标签在没有 Bootstrap 的情况下进行响应

html - CSS:在表格上设置最大宽度

javascript - _lpchecked ="1"在表单中的作用是什么?

带有一个输入 "text"的 html 页面。焦点在哪里?

html - CSS Translate 即使使用 inline-block 也会恢复 Hover Off

php - 指定由 PHP 文件调用的图像宽度和高度

javascript - html 解析包含 javascript 的注释

html - 水平滚动表格而不将它们包装在 div 中