我该如何使文本块保留在左侧，图像列保留在右侧

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

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>