Question

我试图并排放置两张图片。我希望它们是全宽和响应的。但是，我无法弄清楚如何让它们在同一条线上。有人有解决方案吗？这是一个小提琴 - https://jsfiddle.net/0je558ex/

<div class="food-featured-posts">

  <div class="food-featured-posts-first">
  <img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ >
  </div>


  <div class="food-featured-posts-second">
  <img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ >
  </div>

</div>

food-featured-posts {
  width: 100%;
  margin-bottom: 100px;
}
.food-featured-posts-first img {
  width: 50%;
  height: 50%;
  display:inline-block
}
.food-featured-posts-second img {
  width: 50%;
  height: 50%;
  display:inline-block
}

Answer 1

将包裹图像的div设置为width: 50%; display: inline-block;并将img标记设置为width: 100%;，以便它们占用整个div，然后删除内联块div之间的空格HTML中的元素，因为内联元素上的空格占用空间，空间将超过100％宽度（因为每个div占用50％）。

＆＃13;

img {
  width: 100%;
}
.food-featured-posts > div {
  width: 50%;
  display: inline-block;
}

＆＃13;

<div class="food-featured-posts">
  <div class="food-featured-posts-first">
  <img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ >
  </div><div class="food-featured-posts-second">
  <img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ >
  </div>
</div>

＆＃13;

Answer 2

实际上你有两个问题。

首先，您正在设置img的样式，但包含它们的div隐式设置为：display:block;width:100%;。

只需删除div s。

其次，稍微有趣的是，您的img元素仍然不会以50％相互渲染，因为两个display:inline-block元素之间的任何空格意味着总大小超过100％，所以第二个元素被踢到了第二行。

因此，您需要将img代码放在同一行 - 令人讨厌，我知道。

请参阅此问题：CSS two div width 50% in one line with line break in file

<div class="food-featured-posts">
  <!-- Note these are on the same line -->
  <img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ ><img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ >
</div>

food-featured-posts {
  width: 100%;
  margin-bottom: 100px;
}
.food-featured-posts img {
  width: 50%;
  display:inline-block;
}

并排放置两张图像

2 个答案: