我想对齐图像右侧的文本。下面我粘贴了 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>