Question

我正在构建一个叠加窗口并且有两个图像需要水平放置在一起。我尝试过几种不同的风格和结构，但似乎无法将“潜艇”图像放在“每年”图像的右侧。

这基本上就是我现在所处的位置：

.per-year {
  display: block;
  max-height: 200px;
}

.subs {
  display: inline-block;
  max-height: 200px;
}

<div class="_rmModalContentContainer">

  <img src="logo-img" alt="" class="ellogo" >
  <p class="offer-headline">Overlay headline goes here</p>
  <div>
  <img src="image1" class="per-year">
  <img src="image2" class="subs">
  </div>
</div>

Answer 1

您只需将display: inline-block添加到per-year类，因为您当前已将其设置为块元素。

.per-year {
  display: inline-block;
  max-height: 200px;
}
.subs {
  display: inline-block;
  max-height: 200px;
}

<div class="_rmModalContentContainer">

  <img src="http://placehold.it/350x150" alt="" class="ellogo">
  <p class="offer-headline">Overlay headline goes here</p>
  <div>
    <img src="http://placehold.it/150x150" class="per-year">
    <img src="http://placehold.it/150x150" class="subs">
  </div>
</div>

我无法在叠加窗口中将两个图像并排放置

1 个答案: