将内联块用于 table 和动态列是否可行？

Question

我一直在玩弄纯 CSS 方法来创建 table 而无需指定列数。 A table 其中，当浏览器调整大小时，行数和列数也会相应调整。此代码大部分有效：

<html>
<head>
<style>
.kw1 {background-color:#F00; color:#FFF; border-radius:5px; padding:3px;}
.kw2 {background-color:#0F0; color:#000; border-radius:5px; padding:3px;}
.kw3 {background-color:#DDD; color:#000; border-radius:5px; padding:3px;}
.kw4 {background-color:#000; color:#FFF; border-radius:5px; padding:3px;}
.kw5 {background-color:#00F; color:#FFF; border-radius:5px; padding:3px;}
.out {display:inline-block; border:solid 1px #999; width:245px; height:300px; }
img  {width:240px;}    /* image height will vary */
font {font-size:8pt;}
</style>
</head>

<body>
<div style="border:solid 3px #000;" >
<span class="out">
    <a href="some-location"><img src="some-image"></a><br/>
    <font class="kw1">keyword 1</font>
    <font class="kw2">keyword 2</font>
    <font class="kw3">keyword 3</font>
    </span>
<span class="out">
    <a href="some-location"><img src="some-image"></a><br/>
    <font class="kw4">keyword 4</font>
    </span>
<span class="out">
    <a href="some-location"><img src="some-image"></a><br/>
    <font class="kw3">keyword 3</font>
    </span>
<span class="out">
    <a href="some-location"><img src="some-image"></a><br/>
    <font class=""></font>
    </span>
<span class="out">
    <a href="some-location"><img src="some-image"></a><br/>
    <font class="kw5">keyword 5</font>
    <font class="kw3">keyword 3</font>
    </span>
</div>
</body>

smaller browser window -- larger browser window

问题是 "cells" 的交错对齐；当投入不同高度的真实图像时尤其明显。我认为指定确切的高度可以解决问题，但事实并非如此。

我试过 display:grid 但除非我指定行和列，否则项目会溢出。

我对其他纯粹的CSS想法持开放态度，但希望不必必须指定列。未来的计划是在现有项目之间插入新项目，我不想一直调整行和列。

Answer 1

<html>
<head>
<style>
.kw1 {background-color:#F00; color:#FFF; border-radius:5px; padding:3px;}
.kw2 {background-color:#0F0; color:#000; border-radius:5px; padding:3px;}
.kw3 {background-color:#DDD; color:#000; border-radius:5px; padding:3px;}
.kw4 {background-color:#000; color:#FFF; border-radius:5px; padding:3px;}
.kw5 {background-color:#00F; color:#FFF; border-radius:5px; padding:3px;}
.out {
  display:inline-block; border:solid 1px #999; width:245px;height:400px; }
img  {
  width:240px;
  height:300px;
  }    /* image height will vary */
font {font-size:8pt;}
</style>
</head>

<body>
<div style="border:solid 3px #000;" >
<span class="out">
    <a href="some-location"><img src="https://source.unsplash.com/WLUHO9A_xik/300x400"></a><br/>
    <font class="kw1">keyword 1</font>
    <font class="kw2">keyword 2</font>
    <font class="kw3">keyword 3</font>
    </span>
<span class="out">
    <a href="some-location"><img src="https://source.unsplash.com/WLUHO9A_xik"></a><br/>
    <font class="kw4">keyword 4</font>
    </span>
<span class="out">
    <a href="some-location"><img src="https://source.unsplash.com/WLUHO9A_xik/500x600"></a><br/>
    <font class="kw3">keyword 3</font>
    </span>
<span class="out">
    <a href="some-location"><img src="https://source.unsplash.com/WLUHO9A_xik"></a><br/>
    <font class="kw3">keyword 3</font>
    </span>
<span class="out">
    <a href="some-location"><img src="https://source.unsplash.com/WLUHO9A_xik"></a><br/>
    <font class="kw5">keyword 5</font>
    <font class="kw3">keyword 3</font>
    </span>
</div>
</body>
</html>

您需要定义图片的高度，否则在大多数情况下会出现问题。在这里，我使用了不同尺寸的图像，但它们适合特定的宽度和高度，因为我们已经定义了它，如果您不提供特定的高度和宽度，那么它会根据需要自动采用宽度和高度，这将导致对齐问题。

将内联块用于 table 和动态列是否可行？

Is using inline-block for table with dynamic columns feasible?

html

css

css-tables