图像 table display:block 的问题

Question

我想在主页上的图片旁边放一些文字。因为我希望我的主页具有响应性，所以我使用 table 来做到这一点，使用 CSS:

    #tablehomepage {
    display: table;
}

#tablehomepage img {
    min-width: 280px;
    min-height: 190px;
}

#tablehomepage body {
    vertical-align: top;
}


@media (max-width: 920px) {
    #tablehomepage td {
        display: block;
    }

完整代码：https://jsfiddle.net/h3jhgns4/1/。奇怪的是这里没有出现问题...

我的图片在第一个单元格中，文字在我的第二个单元格中。只有 1 行。

我目前遇到的一些问题：

当屏幕低于 920 时，'display:block' 启动，但将我的文字放在我的图像周围。我想在较小的屏幕上将文字放在图像下方。
当 'display:block' 启动时，一些额外的随机边框出现在我的顶部边框下方。
我无法让图像自动缩放以很好地适应不同屏幕尺寸的文本。我想这可以通过为该单元格设置静态大小并将图像放入 css 作为背景来实现，但是我无法设置替代文本（SEO 对我来说非常重要）。

Answer 1

尝试将显示设置为 inline-block，并为文本添加 clear:booth，这样它就需要完整的行宽，并且不会出现在您的图片周围。

图像 table display:block 的问题

Problems with table display:block with image

html

css

image

css-tables