如何使一些图像显示在带有文本的 div 下？答案

【问题标题】：How do I make some images show under a div with text in it?如何使一些图像显示在带有文本的 div 下？
【发布时间】：2020-07-14 05:03:51
【问题描述】：

我正在为某人开发一个网站，但我无法在一个 div 下显示三张图片，其中包含文本以实现更薄的显示。这是 HTML：

    <div id="mainText">
        <h1>Header Here</h1>
        <p>Paragraph Here</p>
    </div>

    <ul id="Images">
        <li><img src="IMG1.jpg" alt="Screenshot"></li>
        <li><img src="IMG2.jpg" alt="Screenshot"></li>
        <li><img src="IMG3.jpg" alt="Screenshot"></li>
    </ul>

这是宽分辨率 CSS：

#mainText {
    width: 40vw;
    margin-left: 8vh;
    margin-right: 0;
    float:left;
}

#mainText h1 {
    color: #fff;
    padding: 3vh 0;
}

#mainText p {
    color: #ff00ff;
    line-height: 5vh;
}

#Images {
    float: right;
    margin-right: 20vw;
}

#Images img {
    width: 20vw;
}

这是我的媒体标签中用于小屏幕的 CSS：

@media only screen and (max-width: 800px) {
    #mainText p {
        width: 100%;
    }

    #Images {
        float: none;
    }
}

任何帮助将不胜感激！

【问题讨论】：

标签： html css responsive-design responsive

【解决方案1】：

您还需要在#mainText div 上设置float: none

#mainText {
  width: 40vw;
  margin-left: 8vh;
  margin-right: 0;
  float: left;
}

#mainText h1 {
  color: #fff;
  padding: 3vh 0;
}

#mainText p {
  color: #ff00ff;
  line-height: 5vh;
}

#Images {
  float: right;
  margin-right: 20vw;
}

#Images img {
  width: 20vw;
}

@media only screen and (max-width: 800px) {
  #mainText p {
    width: 100%;
  }
  #Images, #mainText {
    float: none;
  }
}

<div id="mainText">
  <h1>Header Here</h1>
  <p>Paragraph Here</p>
</div>

<ul id="Images">
  <li><img src="IMG1.jpg" alt="Screenshot"></li>
  <li><img src="IMG2.jpg" alt="Screenshot"></li>
  <li><img src="IMG3.jpg" alt="Screenshot"></li>
</ul>

【讨论】：

【解决方案2】：

提供您想要实现的目标的视觉描述总是好的，但希望这会有所帮助...

如果您想垂直“堆叠”元素，您可能希望构建一列并将元素放入其中。

<div class="my-col">
  ... your code
</div>

用 CSS 定义新类

.my-col {
  display: flex;
  flex-direction: column;
}

【讨论】：