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

【问题标题】：How can I display different sections of an article in different equaly sized columns?如何在不同大小的列中显示文章的不同部分？
【发布时间】：2021-09-30 18:26:18
【问题描述】：

我正在尝试创建我的第一个网页，这对我来说变得越来越复杂。
我试图在 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 列中的信息，但它们不占用相同的空间。感谢您提供任何帮助或建议，谢谢。

【问题讨论】：

欢迎来到 Stack Overflow！我强烈建议先阅读 flex 的工作原理。 css-tricks.com/snippets/css/a-guide-to-flexbox。但是，您可以添加 section { flex: 0 0 33.3333%; max-width: 33.3333% }，这应该会提供您想要的基本版本。

标签： html css multiple-columns

【解决方案1】：

我个人会用更容易设计样式的网格来解决这个问题。您只需添加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-property。然而重要的部分是，您需要定义部分的宽度。要么使用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>

【讨论】：

【解决方案2】：

您需要设置弹性项目。

section{flex-grow:1}

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

【讨论】：

【解决方案3】：

您应该使用flex-grow: 1 设置部分以占据整个空间，并使用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>

【讨论】：