对具有动态列的表使用内联块是否可行？答案

【问题标题】：Is using inline-block for table with dynamic columns feasible?对具有动态列的表使用内联块是否可行？
【发布时间】：2020-06-02 14:36:56
【问题描述】：

我一直在玩弄一种纯 CSS 的方式来创建一个不需要指定列数的表格。一个表格，当浏览器调整大小时，行数和列数会相应调整。这段代码大部分都有效：

<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

问题是“单元格”的交错排列；当放入具有不同高度的真实图像时尤其明显。我认为指定确切的高度可以解决问题，但事实并非如此。

我尝试玩弄display:grid，但除非我指定哪一行和哪一列，否则项目会溢出。

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

【问题讨论】：

font 是一个过时的元素，不应使用
你试过 flexbox 了吗？
查看示例，但找不到如何使用的好示例。
"一个表格，当浏览器调整大小时，行数和列数会相应调整。" ——这听起来根本不像是一张桌子。表是一种数据结构，其语义表示给定行中的所有内容都有共同点，给定列中的所有内容都有共同点。如果元素可以出于纯粹的审美原因移动到不同的行和列中，那么它就是一个网格，而不是一个表格。
Bootstrap 非常糟糕，并且 bootstrap 3 已经过时。 Bootstrap 4 使用 Flexbox。

标签： html css css-tables

【解决方案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>

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

【讨论】：

感谢您的代码。 虽然这确实回答了我的问题，但我发现在 <div> 上使用 display:flex; flex-direction:row; flex-wrap:wrap; 允许我不必也必须指定图像高度，从而保留图像比例.