html - 两张图片并排响应

Question

我正在尝试并排放置两个图像并使它们响应。现在的问题是，第二张图片首先换行，然后根据浏览器的大小使用react。 我希望它们保持在同一行(水平)上并自动更改它们的大小并在某个点换行(这部分不是问题)......

html:

<div id="wrapper">
  <div id="outer">
      <div class="itemwrapper">
        <img src="item2.jpg" alt="bag" />
      </div>
      <div class="itemwrapper">
        <img src="item3.jpg" alt="pen" />
      </div>
  </div>
</div>

CSS:

#wrapper {
  max-width: 1050px;
  margin: 60px auto 60px auto;
  background-color: #DDD
}

.itemwrapper {
  display: inline;
}

img {
  max-width: 100%;
  height: auto;
}

Answer 1

使用显示表并排设置并保持并排和响应。

display: table; with table-layout: fixed; 将为 display: table-cell; 的子元素创建流畅的布局

这不仅可以使它们保持相同的宽度，还可以使容器保持相同的高度。

vertical-align: top; 将使它们与顶部对齐，或者您可以将垂直位置更改为 middle 和 bottom 加上一些其他。

任何问题都可以解决。

#wrapper {
  max-width: 1050px;
  margin: 60px auto 60px auto;
  background-color: #DDD
}
#outer {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.itemwrapper {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}

<div id="wrapper">
  <div id="outer">
    <div class="itemwrapper">
      <img src="item2.jpg" alt="bag" />
    </div>
    <div class="itemwrapper">
      <img src="item3.jpg" alt="pen" />
    </div>
  </div>
</div>