时间戳

首页 > 解决方案 > CSS 在图像旁边放置文本并使其具有移动响应性

html - CSS 在图像旁边放置文本并使其具有移动响应性

问题描述

我使用此代码：我的代码 

<div style="display:inline-block;vertical-align:top;"><a href="domain.tld"><img src="https://i.imgur.com/J5azqpQ.jpg" alt="This is a cool picture" width="300px" /> </a></div><div style="display:inline-block;"><div>13/11/2019</div><div><strong>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</strong></div><div><a href="*|FEEDITEM:URL|*"> Learn More</a><br></div></div><hr><div style="display:inline-block;vertical-align:top;"><a href="domain.tld"><img src="https://i.imgur.com/HkwIsNL.jpg" alt="This is a cool picture" width="300px" /> </a></div><div style="display:inline-block;"><div>13/11/2019</div><div><strong>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</strong></div><div><a href="*|FEEDITEM:URL|*"> Learn More</a><br></div>

我想要实现的只是当您从 PC/笔记本电脑/平板电脑查看代码时，能够在图像旁边显示文本，如图 1 所示。我需要所有移动设备上的文本都位于图像下方（图 2）。
有没有可能在没有媒体查询的情况下实现这一目标的方法？因为有些手机的宽度大于 1080 像素，这与一些旧 PC 的宽度相同。

我想以某种方式确定用户使用手机，以便如果用户使用 PC 或移动设备，我可以实现不同的 css。

我分享两张照片，以便您理解我的意思。
PC端（图1）
手机端（图2）

任何帮助将不胜感激！

标签： htmlcssbrowserresponsive-designcross-browser

解决方案

如果屏幕大小发生变化，您可以使用 css 媒体查询进行调整。

* {
  box-sizing: border-box;
}
.item {
  display: inline-block;
}
/* on PC */
@media screen and (min-width: 550px) {
  .featured-image {
    float: left;
    width: 40%;
    padding-right: 15px;
  }
  .featured-image img {
    width: 100%;
  }
  .description {
    float: left;
    width: 60%;
  }
}
/* on Mobile */
@media screen and (max-width: 550px) {
  .featured-image {
    width: 100%;
  }
  .featured-image img {
    width: 100%;
  }
  .description {
    width: 100%;
  }
}
<div class="item">
  <div class="featured-image">
    <a href="domain.tld"><img src="https://i.imgur.com/J5azqpQ.jpg" alt="This is a cool picture" /> </a>
  </div>
  <div class="description">
      <div>13/11/2019</div>
      <div><strong>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</strong></div>
      <div><a href="*|FEEDITEM:URL|*"> Learn More</a><br></div>
  </div>
</div>
<hr>
<div class="item">
  <div class="featured-image">
    <a href="domain.tld"><img src="https://i.imgur.com/HkwIsNL.jpg" alt="This is a cool picture" /> </a>
  </div>
  <div class="description">
      <div>13/11/2019</div>
      <div><strong>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</strong></div>
      <div><a href="*|FEEDITEM:URL|*"> Learn More</a><br></div>
  </div>
</div>
<hr>

参见：CSS3 媒体查询 - 示例

推荐阅读