调整窗口大小导致文本下推图像答案

【问题标题】：Resizing window causes text to push down image调整窗口大小导致文本下推图像
【发布时间】：2018-12-01 15:01:39
【问题描述】：

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

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>

谢谢！！！

【问题讨论】：

您应该添加代码或部分代码
为了获得最佳响应，请编辑答案以包含您当前的 CSS 和 HTML。
我现在会添加一些代码
真正的问题是什么？我在提供的屏幕截图中没有看到任何问题
@Abinthaha 当我调整窗口大小时，文本将左侧的图像向下推，因为它占据了两行。我希望图像对齐，文本在被挤压时向上移动。

标签： html css web responsive-design

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：