CSS表格单元格大小问题

Question

我创建了一个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中显着减少了问题，但是我仍然有这个问题：

- Paul

---

你想要从div构建一个表格？这是可行的，但需要花费大量精力。为什么不选择常规表格呢？ - Hazard in Code

我需要它能够轻松地被屏幕阅读器阅读，而HTML表格与之不兼容。 - Paul

我现在正在处理一个小问题，我认为这样做是有充分理由的。 - Hazard in Code

哈哈，是的，我一直认为通过CSS创建表格而不是使用HTML表格是更好的编程实践。无论如何，我只是看不到问题在哪里 - 我尝试过的所有大小选项都没有效果，我不确定问题出在哪里...提前致谢。 - Paul

Answer 1

即使是经过CSS样式处理的表格，您仍需要始终关注垂直对齐。

只需向标题类添加vertical-align属性：

.title {
display: table-cell;
vertical-align: top;
background-color:blue;
width:100%;
height:185px;
}

- Josh

---

谢谢 - 这帮了很多，但是可能还有5-6像素的白色空间重叠在图像上。现在剩下的就是这个样子：这里。 - Paul

是的，我到那里了，这就是我仍在努力解决的问题！ - Hazard in Code

找到了，将 display: block; 添加到img标签中即可。 - Hazard in Code

谢谢！这让我整天都很疯狂！现在我应该将这个答案设置为正确的吗？ - Paul