html - 具体栏目

Question

我一直在用 HTML 做一些事情，我需要一些专栏。我知道如何制作它们以及它们工作原理的基础知识。但是，我遇到了一个问题。我需要有 3 列，顶部有图像，然后是底部的文本。但是，如果调整浏览器的大小，底部的文本将无法流入下一列 - 它只需要向上或向下移动。到目前为止我所拥有的:

body {
  background-color: white;
  font-family: times, serif;
  color: black;
}

div {
  display: flex;
  margin: 50px;
  flex-wrap: wrap;
}

<div>
  <div class="first">
    <img src="Images/australia_flag.jpg" alt="Australian Flag" title="Australian Flag" height="200" width="300"> text as well </div>
  <div class="second">
    <img src="Images/brazil_flag.jpg" alt="Brazilian Flag" title="Brazilian Flag"> even more text </div>
  <div class="third">
    <img src="Images/china_flag.jpg" alt="Chinese Flag" title="Chinese Flag" height="200" width="300"> text again
  </div>
</div>

Answer 1

不完全确定你指的是列还是行？根据您的代码，它看起来像行。如果是这样的话，我不确定你所说的“流入下一栏”是什么意思？您可以查看 CSS position 的相对值和绝对值.

如果实际上您指的是列，我强烈建议您使用 Bootstrap's Grid System .这非常适合创建响应式列。