调整窗口大小会导致文本下移图像

Question

看看图片以更好地理解我在说什么。

https://i.stack.imgur.com/gaLlX.png

如何避免这种情况？

有一些示例显示文本将图像推高，但我尝试弄乱了vertical-align属性，但无法解决问题。

.jsinfo {
  margin-top: 50px;
  font-family: 'Lato', 'Times New Roman', Times, serif;
  color: rgb(33, 33, 80);
}

.jsimages{
    width:100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px grey;
    margin-bottom:30px;
}

<div class="row">
  <div class="col-sm">
    <div class="jsinfo">1. Asks the user's name.<img class="jsimages" src="images/js1.png" alt="javascript implementation"></div>
    <div class="jsinfo">3. Comments on the amount of travel. Turns travel inputs into list.<img class="jsimages" src="images/js3.png" alt="javascript implementation"></div>
  </div>
  <div class="col-sm">
    <div class="jsinfo">2. Greets the user and asks where they have traveled to.<img class="jsimages" src="images/js2.png" alt="javascript implementation"></div>
    <div class="jsinfo">4. Provides info about the word that is clicked.<img class="jsimages" src="images/js4.png" alt="javascript implementation"></div>
  </div>
</div>

谢谢！

Answer 1

我对您的代码进行了一些更改。您能确认它是否是您期望的输出结果。

.jsinfo {
  margin-top: 50px;
  font-family: 'Lato', 'Times New Roman', Times, serif;
  color: rgb(33, 33, 80);
  display: flex;
  align-items: flex-start;
}

.jsimages{
    width: 50%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px grey;
    margin-bottom:30px;
    height: auto;    
}

<div class="row">
  <div class="col-sm">
    <div class="jsinfo">
      <span>1. Asks the user's name.</span>
    <img class="jsimages" src="https://www.sabreakingnews.co.za/wp-content/uploads/2018/02/lion.jpg" alt="javascript implementation"></div>
    <div class="jsinfo">
      <span>3. Comments on the amount of travel. Turns travel inputs into list.</span>
      <img class="jsimages" src="https://www.sabreakingnews.co.za/wp-content/uploads/2018/02/lion.jpg" alt="javascript implementation"></div>
  </div>
  <div class="col-sm">
    <div class="jsinfo">
      <span>2. Greets the user and asks where they have traveled to.</span>
    <img class="jsimages" src="https://www.sabreakingnews.co.za/wp-content/uploads/2018/02/lion.jpg" alt="javascript implementation"></div>
    <div class="jsinfo">
      <span>4. Provides info about the word that is clicked.</span>
      <img class="jsimages" src="https://www.sabreakingnews.co.za/wp-content/uploads/2018/02/lion.jpg" alt="javascript implementation"></div>
  </div>
</div>

Answer 2

要在不使用自定义CSS布局的情况下执行此操作，应将文本放置在单独的行中，并将图像放置在单独的行中。看下面的例子：（我没有改变你的CSS）

.jsinfo {
  margin-top: 50px;
  font-family: 'Lato', 'Times New Roman', Times, serif;
  color: rgb(33, 33, 80);
}

.jsimages{
    width:100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px grey;
    margin-bottom:30px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm">
    <span class="jsinfo">1. Asks the user's name.</span>
  </div>
  <div class="col-sm">
    <span class="jsinfo">2. Greets the user and asks where they have traveled to.</span>
  </div>
</div>

<div class="row">
  <div class="col-sm">
    <img class="jsimages" src="https://i.stack.imgur.com/gaLlX.png" alt="javascript implementation">
  </div>
  <div class="col-sm">
    <img class="jsimages" src="https://i.stack.imgur.com/gaLlX.png" alt="javascript implementation">
  </div>
</div>

<div class="row">
  <div class="col-sm">
    <span class="jsinfo">3. Comments on the amount of travel. Turns travel inputs into list..</span>
  </div>
  <div class="col-sm">
    <span class="jsinfo">4. Provides info about the word that is clicked.</span>
  </div>
</div>

<div class="row">
  <div class="col-sm">
    <img class="jsimages" src="https://i.stack.imgur.com/gaLlX.png" alt="javascript implementation">
  </div>
  <div class="col-sm">
    <img class="jsimages" src="https://i.stack.imgur.com/gaLlX.png" alt="javascript implementation">
  </div>
</div>