调整窗口大小会导致文本向下推送图像

Question

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

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

我怎样才能避免这种情况？

有一些示例显示文本向上推图像，但我尝试弄乱垂直对齐属性，无法解决我的问题。

.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="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>

Answer 2

我对你的代码做了一些更改。您能否确认它是否是您期望的输出。

.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>