html - 我如何使文本 block 在左边，图像列在右边

Question

所以现在我在右边有一 block 文本和图像。它在我的 PC 上看起来不错，但在移动设备上图像消失了，我必须向右滚动才能看到所有图像。有办法解决这个问题吗？

PC View (出于个人原因将文本和图像涂黑):

移动 View :

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

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

<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 文件中。

Answer 1

我相信使用 Flexbox 可以得到预期的结果。我删除了 float 和宽度规范。

#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>