Question

我的图片位于文字右侧。那工作得很好。当窗口大小大大减小时，文本将低于我的图像，并且图像位于其上方，如预期的那样。然而，我想要的是将窗口大小调整为移动大小时，将其更改为图像低于文本而不是高于文本的位置。

这可能吗？

这是我的代码：

.park-img {
  float: right;
}
.park-img img {
  display: inline-block;
}

<section class="tmt tmt-parking">
  <a id="tmt-parking"></a>
  <div class="row">
    <a name="parking"></a>
    <div class="park-img">
      <img src="https://www.shsu.edu/academics/continuing-education/completion-ceremony/img/parking-map-1.jpg" style="height: 300px width: 300px">
    </div>
    <div class="small-12 medium-6 columns large-6 columns">
      
        <h2>Parking Information</h2>
     
      <p>The Sam Houston State University Parking Garage, located at 1730 Avenue I, is available 24 hours a day, seven days a week. Customers will pull an entry ticket at the entrance gates to enter. This entry ticket plus your credit card is needed to exit
        (Master Card, Visa, Discover, or American Express only). Your credit card will be charged based on the amount of time parked. <strong>CASH IS NOT ACCEPTED</strong>. Rates are $2.00/hour, with a $8.25/maximum fee per entry. Lost tickets will result
        in a $10.00 exit fee.</p>
      <p><strong>Do not park in spaces marked, “Reserved” between 7:30 a.m. and 5:00 p.m. daily, as they are for semester contract holders only.</strong>
      </p>
      <p>Additional parking, at my charge, can be found in the following lots:</p>
      <ul>
        <li>33: Next to the Parking Garage (entrance/exit on Avenue I)</li>
        <li>35: At the corner of Avenue I and Bearkat Blvd (entrance/exit on Avenue I)</li>
        <li>36: Parallel parking along Avenue I</li>
        <li>56: In front of the George J. Beto Criminal Justice Center along 17th Street</li>
      </ul>
    </div>

  </div>

如果愿意，这里是fiddle

Answer 1

您需要使用flexbox module。然后，您就可以使用“订单”属性。

.flexbox {
  display: flex;
  flex-direction: column;
}
  
.item-first {
  order: 2;
}

<div class="flexbox">
  <div class="item-first">I'm first, i guess?</div>
  <div class="item-second">I'm not first for sure</div>
</div>

PS：注意，你不能把h2标签放在p标签里。

Answer 2

最简单的方法是创建2个img标签并使用CSS媒体查询。将第二张图片放在您的文字下，然后将其设为display:none。然后在CSS中指定屏幕大小：如果屏幕尺寸< Npx，display: none表示您的第一张图片，并使第二张图片可见。您最好设置一个新的宽度和高度，使其适合您的屏幕尺寸！只需使用id来区分图像标记并使CSS尽可能简单。

使图像在移动设备上方，而不是在上方

2 个答案: