html - 调整窗口大小导致文本下推图像

Question

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

/image/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

要在布局中不使用自定义 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="/image/gaLlX.png" alt="javascript implementation">
  </div>
  <div class="col-sm">
    <img class="jsimages" src="/image/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="/image/gaLlX.png" alt="javascript implementation">
  </div>
  <div class="col-sm">
    <img class="jsimages" src="/image/gaLlX.png" alt="javascript implementation">
  </div>
</div>