在 html 文件中写入响应式 CSS

Question

我正在尝试创建一小段文本，并在其右侧添加图像。然而，我正在工作的网站没有创建样式表的选项，所以我必须在我的 html 文件中编写我的 css。下面的代码显示了我正在做什么（图像只是随机的）：

<div style="display:flex; max-width:980px; margin:auto; align-items:center; justify-content:center;">
  <div style="padding: 10px;">
    <h1 style="font-weight: bold; font-size: 2em; padding-bottom: 25px;">Title</h1>
    <p style="width: 30vw;">paragraph of text.
    
    another paragraph of text</p>

  </div>
  <img style="padding: 10px; width:100px;" src="https://images.squarespace-cdn.com/content/v1/5e10bdc20efb8f0d169f85f9/09943d85-b8c7-4d64-af31-1a27d1b76698/arrow.png" />

</div>

有没有一种方法可以让当文本和图像不再彼此相邻时，图像被放置在文本下方？

Answer 1

flex-wrap: wrap

<div style="display:flex; max-width:980px; margin:auto; align-items:center; justify-content:center; flex-wrap: wrap;">
  <div style="padding: 10px;">
    <h1 style="font-weight: bold; font-size: 2em; padding-bottom: 25px;">Title</h1>
    <p style="width: 30vw;">paragraph of text.
    
    another paragraph of text</p>

  </div>
  <img style="padding: 10px; width:100px;" src="https://images.squarespace-cdn.com/content/v1/5e10bdc20efb8f0d169f85f9/09943d85-b8c7-4d64-af31-1a27d1b76698/arrow.png" />

</div>