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

时间:2018-10-01 16:51:00

标签: html css

我希望每个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>

2 个答案:

答案 0 :(得分:1)

您不需要相对/绝对定位。您需要浮动/清除。您还需要设置最小高度以使布局不重叠。尝试从this working pen I mademin-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

答案 1 :(得分:0)

img.club {}

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

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

.club img