Question

我希望每个div内的图像都浮动到文本的左侧，以便每个div的文本位于图像的右侧。我能够使用CSS对一个div做到这一点，但是一旦我添加多个div并选择了CSS中的所有div，它就不再起作用。

.club {
  text-align: left;
  padding: 0px 35px;
  font-weight: bold;
  border-radius: 10px;
  position: relative;
}

img.club {
  position: absolute;
  left: 15px;
  top: 35px;
}

<div class="club">
  <img style="width:300px;height:300px;" src="images/wccs.jpg" />
  <h3>blah blah </h3>
  <p>blah blah
    <p>
</div>

<div class="club">
  <img style="width:300px;height:300px;" src="images/wccs.jpg" />
  <h3>blah blah </h3>
  <p>blah blah
    <p>
</div>

Answer 1

您不需要相对/绝对定位。您需要浮动/清除。您还需要设置最小高度以使布局不重叠。尝试从this working pen I made的min-height的声明中删除.club属性，看看没有它会发生什么。

此外，通过使用flexbox或grid，可以更加优雅地完成您想要做的事情，而无需min-height的混乱强迫。您可以查看this CSS cheatsheet I made以获得快速摘要。

为了更好地对布局建模，我使用了占位符图像。除此之外，HTML保持不变。修改后的CSS如下：

{
  text-align: left;
  padding: 0px 35px;
  font-weight: bold;
  border-radius: 10px;
  background-color: yellow;
  min-height: 300px;
}

.club img {
  float: left;
  clear: both;
}

<div class="club">
  <img style="width:300px;height:300px;" src="https://via.placeholder.com/300x300" />
  <h3>blah blah </h3>
  <p>blah blah
    <p>
</div>

<div class="club">
  <img style="width:300px;height:300px;" src="https://via.placeholder.com/300x300" />
  <h3>blah blah </h3>
  <p>blah blah
    <p>
</div>

.club

Answer 2

img.club {}

此操作不起作用，因为它选择了every image with the class of "club"，但是您的html中没有图像具有club类。

要在每个div中选择两个图像，请使用

.club img

将所有div内的图像对齐到文本的左侧

2 个答案: