Question

我正在尝试在同一行上创建三个单独的圆形图像。我设法让两个人处于正确的位置，但我无法让最后一个进入正确的位置。

.wrap {
  width: 100%;
}

.image-left {
  content: url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
  height: 250px;
  float: left;
  padding-left: 10%;
}

.image-centre {
  content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
  height: 250px;
  margin-left: auto;
  margin-right: auto;
}

.image-right {
  content: url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
  height: 250px;
  float: right;
  padding-right: 10%;
}

<div class="wrap">
  <div class="image-left"></div>
  <div class="image-centre"></div>
  <div class="image-right"></div>
</div>

Answer 1

可能有更好的方法可以做到这一点，但这里有一个有用的方法：https://jsfiddle.net/5ybLh6vy/

<div class="wrap">
    <div class="image-left">
        <img src="https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png">
    </div>
    <div class="image-centre">
        <img src="https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png">
    </div>
    <div class="image-right">
        <img src="https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png">
    </div>
</div>

.wrap {
  width: 100%;
  display: table;
}

.wrap img {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
}

.image-left, .image-centre, .image-right {
  display: table-cell;
  width: 33%;
}

Answer 2

如何使用图片标记并将它们包裹在这样的div周围？

.wrap {
  width: 100%;
}
.image-wrapper{
  width: 33%;
  display: inline-block;
  text-align: center;
}
.image-wrapper>img{
  height:250px;
}

<div class="wrap">
    <div class="image-wrapper">
       <img src='https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png'>
    </div>
    <div class="image-wrapper">
       <img src='https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png'>
    </div>
    <div class="image-wrapper">
       <img src='https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png'>
    </div>
</div>

Answer 3

如果您希望它们整齐排列，则必须将float:left;添加到所有这些行，或者添加到.wrap类，但您必须向每个display:inline;添加.wrap { width: 100%; float: left; } .image-left { content:url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png); height: auto; max-width: 25%; padding-left: 10%; display:inline; } .image-centre { content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png); max-width: 25%; height:auto; display:inline; } .image-right { content:url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png); height: auto; max-width: 25%; display:inline; padding-right: 10%; }我认为这是最好的解决方案。问题是如果视口不够宽，它将推到下一行。

<div class="wrap">
    <div class="image-left"></div>
    <div class="image-centre"></div>
    <div class="image-right"></div>
  </div>

{{1}}

Answer 4

将所有三个div向右浮动，使它们宽度为：33.33％和box-sizing：border-box。

这将使三个均匀间隔的图像内嵌浮动。

Answer 5

你可以使用flexbox，我也建议使用内嵌图像。

＆＃13;

.wrap {
  display: flex;
  background-color: crimson;
  padding: 5% 10%;
}
.wrap div {
  flex: 1;
  text-align: center;
}
.wrap img {
  max-width: 90%;
  height: auto;
}

＆＃13;

<div class="wrap">
  <div class="image-left">
    <img src="https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png">
  </div>
  <div class="image-centre">
    <img src="https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png">
  </div>
  <div class="image-right">
    <img src="https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png">
  </div>
</div>

＆＃13;

Answer 6

您可以为所有图片指定float: left;，然后设置正确的边距。

如何在同一行保留三个div图像？

6 个答案: