将内联块用于 table 和动态列是否可行?
Is using inline-block for table with dynamic columns feasible?
我一直在玩弄纯 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想法持开放态度,但希望不必必须指定列。未来的计划是在现有项目之间插入新项目,我不想一直调整行和列。
<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>
您需要定义图片的高度,否则在大多数情况下会出现问题。
在这里,我使用了不同尺寸的图像,但它们适合特定的宽度和高度,因为我们已经定义了它,如果您不提供特定的高度和宽度,那么它会根据需要自动采用宽度和高度,这将导致对齐问题。
我一直在玩弄纯 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想法持开放态度,但希望不必必须指定列。未来的计划是在现有项目之间插入新项目,我不想一直调整行和列。
<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>
您需要定义图片的高度,否则在大多数情况下会出现问题。 在这里,我使用了不同尺寸的图像,但它们适合特定的宽度和高度,因为我们已经定义了它,如果您不提供特定的高度和宽度,那么它会根据需要自动采用宽度和高度,这将导致对齐问题。