如何在大小相同的不同列中显示文章的不同部分？

Question

我正在尝试创建我的第一个网页，这对我来说越来越复杂了。
我试图在 3 个不同且大小相等的列中显示它，但我能够实现的最接近的是：

article {
  display: flex;
}

<article>

  <section id="sec1">
    <p> info </p>
  </section>

  <section id="sec2">
    <p> info </p>
  </section>

  <section id="sec3">
    <p> info </p>
  </section>

</article>

此表格充分分布了 3 列中的信息，但它们并没有占据相同的位置 space。感谢您提供任何帮助或建议，谢谢。

Answer 1

您需要设置弹性项目。

section{flex-grow:1}

对于所有 flex 相关的东西，这是一个值得阅读的资源： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我个人会使用更容易设置样式的网格来解决此问题。您只需添加 article { display: grid; grid-template-columns: repeat(3, 1fr); }.
这将创建 3 个大小相同的列。

然后您可以添加 grid-gap 以添加间距来分隔列，而无需您自己实际计算任何内容。

article {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

/* for styling purpose only */
section {
  border: 1px solid red;
  padding: 5px;
}

<article>

  <section id="sec1">
    <p> info </p>
  </section>

  <section id="sec2">
    <p> info </p>
  </section>

  <section id="sec3">
    <p> info </p>
  </section>

</article>

如果你想使用flexbox那么你也可以使用gap-属性。但是重要的是，您需要定义该部分的宽度。要么使用 width: 33.33%; ，但是在大屏幕上可能会导致像素不准确。更好的方法是使用 width: calc(100% / 3);

article {
  display: flex;
  gap: 10px;
}

article > section {
  width: calc(100% /3);
}

/* for styling purpose only */
section {
  border: 1px solid red;
  padding: 5px;
}

<article>

  <section id="sec1">
    <p> info </p>
  </section>

  <section id="sec2">
    <p> info </p>
  </section>

  <section id="sec3">
    <p> info </p>
  </section>

</article>

Answer 3

您应该将带有 flex-grow: 1 的部分设置为占据整个 space 和 flex-basis: 0 以平均设置列的宽度。看例子：

假设您有 3 个内容不相等的列：

article {
  display: flex;
}

article section {
  flex-grow: 1;
  flex-basis: 0;
}

#sec1 {
  background: red;
}

#sec2 {
  background: yellow;
}

#sec3 {
  background: green;
}

<article>

  <section id="sec1">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur perferendis veritatis dolore natus debitis </p>
  </section>

  <section id="sec2">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur perferendis veritatis dolore natus debitis, iusto aliquid necessitatibus sint. </p>
  </section>

  <section id="sec3">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur perferendis veritatis dolore natus debitis, iusto aliquid necessitatibus sint. Impedit aliquid, fugit consequatur hic, praesentium ab! Provident qui, laudantium suscipit. </p>
  </section>

</article>

如何在大小相同的不同列中显示文章的不同部分？

How can I display different sections of an article in different equaly sized columns?

html

css

multiple-columns