Question

我想对齐图像右侧的文字。下面我粘贴了HTML和CSS的代码。我也是为此而糊涂的。请找到小提琴的链接，让我知道解决方案。谢谢！

<!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>

Answer 1

检查这个答案，正如你所看到的，我刚刚在div元素中添加了“style = float”属性并将其分隔为＆lt; / div＆gt;标记：

<!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>

Answer 2

所以逻辑是 -

使用div作为父容器，并在其中放置a和span文本
将父div，a和span设为float:left'

.row {
 float: left;
  margin-right: 20px;
}

.row a {
  float: left;
  margin-right: 5px;
}

.row span {
 float: right;
}

<div class="row">
  <a href="#">
    <img src="http://placehold.it/150">
  </a>
  <span>This is sample text</span>
</div>
<div class="row">
  <a href="#">
    <img src="http://placehold.it/150">
  </a>
  <span>This is sample text</span>
</div>
<div class="row">
  <a href="#">
    <img src="http://placehold.it/150">
  </a>
  <span>This is sample text</span>
</div>

对齐多个图像右侧的文本

2 个答案: