gpt4 book ai didi

html - 在多个图像的右侧对齐文本

转载 作者:行者123 更新时间:2023-11-28 06:12:26 25 4
gpt4 key购买 nike

我想对齐图像右侧的文本。下面我粘贴了 HTML 和 CSS 代码。我也在为此粘贴 fiddle 。也请找到 fiddle 的链接,让我知道解决方案。谢谢!

https://jsfiddle.net/yt4cxvLs/

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 50px;

float: left;
width: 180px;
}


div.img img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: left;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

最佳答案

检查这个答案,如您所见,我只是在 div 元素中添加了“style=float”属性并分隔了

标签:

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 50px;

float: left;
width: 180px;
}


div.img img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: left;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>

<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>


<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>


<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>


</html>

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