3

我创建了一个包含两行的 CSS 表格布局 - 第一个单元格包含一个图像，第二个单元格包含一个标题。在此之下，会出现内容，但这不是问题。

每当我尝试这个时，我都会为顶部表格行获得大量超大的表格单元格，我似乎无法调整其大小。任何帮助，将不胜感激。

问题的图像

我已经对表格单元格进行了颜色编码，橙色块是图像。下面的空白区域似乎已经创建，因为蓝色表格单元格太大了。

<div class="table">
        <div class="tr-header">
            <div class="image-cell">
                <img src="orange.png"/>
            </div>
            <div class="title">
            <h1>title</h1>
            </div>
        </div>
        <div></div>
        <div class="tr-content">
            <div class="content">
                <!-- Lorem Ipsum -->            
            </div>
        </div>
</div>

和CSS：

    *
    {
    margin:0px;
    padding:0px;
    }
    #table
    {
    display: table;
    }
    .tr-header
    {
    width:100%;
    display: table-row;
    height:185px;
    }
    img
    {
    width: 285px;
    height: 185px;
    }
    .image-cell
    {
    width:285px;
    height:185px;
    display: table-cell;
    }
    .title
    {
    display: table-cell;
    background-color:blue;
    width:100%;
    height:185px;
    }
    .tr-content
    {
    display: table-row;
    }
    .content
    {
    background-color:yellow;
    display: table-cell;
    width:100%;
    }

如果颜色编码没有帮助，或者我的代码不容易阅读，或者我刚刚犯了一个愚蠢的错误，我深表歉意，但我已经搜索了 W3 的网站以及以前的 stackoverflow 问题。

提前致谢。

编辑：

添加 vertical-align:top 到 .title 大大减少了问题，但我仍然剩下这个：

编辑

4

1 回答 1

5

您需要始终担心与表格的垂直对齐 - 即使是 CSS 样式的表格。

只需在标题类中添加一个垂直对齐属性：

.title {
display: table-cell;
vertical-align: top;
background-color:blue;
width:100%;
height:185px;
}
于 2012-11-21T20:15:19.900 回答