如何构造HTML / CSS以允许根据屏幕大小在图像旁边和下方响应式显示文本[重复]答案

【问题标题】：How to structure HTML/CSS to allow responsive display of text next to and then under an image depending on size of screen [duplicate]如何构造HTML / CSS以允许根据屏幕大小在图像旁边和下方响应式显示文本[重复]
【发布时间】：2019-08-12 20:14:21
【问题描述】：

我正在设置一封电子邮件，其中包含正文中的图片和一些文字。在普通计算机屏幕上，图像位于左侧，相关文本位于右侧（使用 inline-block）。看起来像这样：

(https://www.flickr.com/photos/183424995@N08/48518551371/in/dateposted-public/)

当屏幕尺寸改变时，即。对于 i-phone，我的目标是让文本在图像下方移动，而不是仅具有屏幕一半的宽度（因为它是内联块），以占据下方屏幕的整个宽度。

我想要得到的东西： https://www.flickr.com/photos/183424995@N08/48518549646/in/dateposted-public/

实际发生的情况： https://www.flickr.com/photos/183424995@N08/48518724692/in/dateposted-public/

我创建了一个包含图像 div 的“主”div 和一个包含文本的 div，两者都是 inline-block。 “主” div 的宽度设置为 100%，文本 div 有一个最小和一个最大 div，因此它可以根据屏幕宽度从图像旁边移动到图像下方。

我尝试将文本 div 的最大宽度重新调整为更宽，但文本永远不会保留在图像的一侧。我试图避免漂浮任何东西。我不能使用 bootstrap 或 flexbox，因为它是一封电子邮件，所以仅限于相当基本的 CSS。

JSFiddle 是 https://jsfiddle.net/cfn76vqz/ 以显示我到目前为止的响应能力。一般的HTML结构如下。

<div id="main">
  <div id="left">
    <div >
      <img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
    </div>  
  </div>
  <div id="right">
    <div >
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
    </div>  
  </div>
</div>

TLDR：我很困惑如何使文本 div 基本上是图像下方的 100% 宽度，但如果有空间可以将其放在图像的一侧，也可以是 50%。据我了解，它总是限制在 50%，因为它是 inline-block 部分的一部分。

【问题讨论】：

一些答案提到了视口，但这只会重现问题。如果我在宽度上使用 vw，那么当在更大的屏幕上时，文本不会恢复到“图像”的右侧，而是停留在底部。
您需要为此使用@media 查询。 vh 和 vw 单位在这里帮不了你。

标签： html css

【解决方案1】：

因为你用这个设置宽度，所以它不是完全宽度

  max-width: 50%;

那么……我们该怎么做呢

我们需要使用FLEX显示像这样

#main {
  /*---HERE---*/
  display: flex;
  flex-wrap: wrap;
  /*----------*/
  background: yellow;
  width: 100%;
}

#left {
  background: orange;
}

#right {
  /*---HERE---*/
  flex-basis: 0;
  flex-grow: 1;
  min-width: 50%;
  /*----------*/
  background: green;
  vertical-align: top;
}

<!-- YOUR OLD CODE -->
<div id="main">
  <div id="left">
    <div>
      <img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
    </div>
  </div>
  <div id="right">
    <div>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
    </div>
  </div>
</div>

如果你想了解 flex ...more here

【讨论】：

感谢您的回答，但正如问题中所述，我不能使用 flexbox，因为它是一封电子邮件，并且仅限于使用非常基本的 CSS。
怎么样？ media screen and (max-width:600px)
可以用吗？发送电子邮件

【解决方案2】：

您可以使用 width: 100vw 和 height: 100vh 等视口单位，使其根据显示的高度和宽度做出响应。click here

【讨论】：