css - 保持两张图片水平对齐，同时在它们旁边放置一个格式化的段落

Question

我正在建立一个网站，如果您需要的话，我有两张尺寸为 300x250 的图片。我的问题是，我希望图片水平对齐并向右对齐有一个程式化的段落(标题下方有元素符号)

我的 HTML

<div class = "mainthing">
  <div class = "pilli">
    <img class="pillipic" src="f..../pilli.jpg">
    when i add text here with a ["br"] or using ["pre"] it changes second picture locaiton.
  </div>
  <div class="shaun">
    <img class="shaunpic" src="../shaun.jpg">
  </div>
  want the second paragraph to go here to right of the second image
</div>

我的 CSS:

.mainthing {
  margin-top: 20vh;
  margin-left: 20vw;
  margin-bottom: 20vh;
  margin-right: 20vw;
  max-width: 100%;
  text-align: center;

}

.pillipic {
  max-width: 100%;
  height: auto;
  float: left;
}

.shaunpic {
  max-width: 100%;
  height: auto;
  float: left;
}

我尝试了几种不同的方法，但它总是会改变第二张图片的位置。我将不胜感激任何帮助。我将 vh/vw 用于主要 div 的原因是网站上有一个单独的标题，它有按钮和左侧。我有那个工作，只是这个当前的问题给我带来了麻烦。

Answer 1

为 .shaunpic 提供 float: right:

.shaunpic {
  max-width: 100%;
  height: auto;
  float: right;
}

像这样:

.mainthing {
  margin-top: 20vh;
  margin-left: 20vw;
  margin-bottom: 20vh;
  margin-right: 20vw;
  max-width: 100%;
  text-align: center;

}

.pillipic {
  max-width: 100%;
  height: auto;
  float: left;
}

.shaunpic {
  max-width: 100%;
  height: auto;
  float: right;
}

.pilli, .shaun {clear: both;}

<div class = "mainthing">
  <div class = "pilli">
    <img class="pillipic" src="//placehold.it/50x50">
    when i add text here with a ["br"] or using ["pre"] it changes second picture locaiton.
  </div>
  <div class="shaun">
    <img class="shaunpic" src="//placehold.it/50x50">
  </div>
  want the second paragraph to go here to right of the second image
</div>

预览