html - 我如何使它使文本块在左侧，图像列在右侧

Question

所以现在我在右边有一块文本和图像。在我的 PC 上看起来不错，但在移动设备上，图像会离开屏幕，我必须向右滚动才能看到所有图像。有没有办法来解决这个问题？

PC 视图（因个人原因涂黑了文本和图像）：

移动视图：

如您所见，图像脱离了灰色背景。

这是我的代码目前的样子：

<div id="mainContent">
    <div id="images" style="width:20%;float:right;margin:0;padding:0;">
        <img alt="Camp1" src="../images/aA0Va8WQ.jpeg" width="320" height="428" title="Camp1">
        <img alt="Camp2" src="../images/37679145_1817909031657489_8733839330973319168_n.jpg" title="Camp2">
        <img alt="Camp3" src="../images/19428929_122721344992456_2874273194875813888_n.jpg" title="Camp3">
    </div>

    <div id="mainText" style="width:80%;">
        <p>Enter text here.</p>
    </div>
</div>

另外，作为一种偏好，我更喜欢它，因此图像的代码块位于文本下方，但这不是必需的，它目前在上面，因为否则我无法让它工作。

此外，在我正确修复它之前，我现在正在使用样式标签，然后我会将它添加到我的 css 文件中。

标签： htmlcss

Answer 1

我相信使用 Flexbox 可以达到预期的效果。我删除了浮动和宽度规格。

#mainContent {
  display: flex;
}

<div id="mainContent">
  <div id="mainText">
    <p>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. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>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. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>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. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="images">
    <img alt="Camp1" src="https://via.placeholder.com/150x150" title="Camp1">
    <img alt="Camp2" src="https://via.placeholder.com/150x150" title="Camp2">
    <img alt="Camp3" src="https://via.placeholder.com/150x150" title="Camp3">
  </div>
</div>