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

问题描述 投票：1回答：1

我一直在用纯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思想持开放态度，但很乐意NOT必须指定列。未来的计划将在现有项目之间插入新项目，我不想一直调整行和列。

html css css-tables
1个回答
0
投票
<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>

您需要定义图像的高度，否则在大多数情况下会引起问题。在这里，我使用了不同大小的图像，但是由于我们已经定义了它们，所以它们适合特定的宽度和高度，如果您不指定特定的高度和宽度，那么它将根据其需要自动获取宽度和高度，这会导致对齐问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.