gpt4 book ai didi

html - 显示灵活的图像网格

转载 作者:行者123 更新时间:2023-12-04 03:54:50 25 4
gpt4 key购买 nike

<分区>

我正在尝试设置一个将成为按钮的网格。每个都包含一个图像和一些文本。我希望它改变一行中的图片数量以适应窗口宽度,因此例如在 PC 上我可能会显示 3 张,而手机将显示一列。除了刺激之外,我的测试代码可以正常工作。正如您将从测试中看到的那样,图片与标题底部对齐。这看起来很笨拙,如果顶部对齐会更好。 http://www.adamshome.org.uk/images/ButtonPhoto.jpg

<html>
<head>
<title> test buttons </title>
<style>
body { font-size:100%; }
.heading { font-weight: bold; font-size: 2em; text-align: center; }
#container {
display: block;
width: 100%;
position: relative;
/* border: solid 1px green; */
}
.item {
display: inline-block;
position: relative;
width: 380px;
margin: 3px;
/* border: solid 1px red; */
align: top;
}
</style>
</head>

<body>
<div id="container">

<div class="item">
<figure >
<figcaption class='heading' >Line1</figcaption>
<img src='images/PICT0071.JPG' style='width:310px'>
<figcaption>Line2</figcaption>
</figure>
</div>

<div class="item">
<figure >
<figcaption class='heading' >Line1</figcaption>
<img src='images/RiverTripPic.jpg' style='width:310px'>
<figcaption>Line2<br>Line3<br>Line4</figcaption>
</figure>
</div>

<div class="item">
<figure >
<figcaption class='heading' >Line1</figcaption>
<img src='images/CancelledRiverTripPic.jpg' style='width:310px'>
<figcaption>Line2<br>Line3<br>Line4<br>Line5</figcaption>
</figure>
</div>

<div class="item">
<figure >
<figcaption class='heading' >Line1</figcaption>
<img src='images/RiverTripPic.jpg' style='width:310px'>
<figcaption>Line2<br>Line3<br>Line4</figcaption>
</figure>
</div>

</div>

</body>
</html>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com