Fatal编程技术网
  • css/
  • 如何防止长段落破坏CSS网格[模板区域]

如何防止长段落破坏CSS网格[模板区域]

css

如何防止长段落破坏CSS网格[模板区域],css,css-grid,Css,Css Grid,我正在尝试组合一个绝对简单的布局，看起来我被一个p标记阻止了，该标记将容器拉伸到网格布局之外，而不是预期的行为（包装） 以下是一些基本代码： HTML: 我的理解是，这个网格模板区域基本上是说，“每行有5个相等的分数单位，主网格始终取中间的三个 然而，实际发生的情况是，如果“某些文本”被拉长，模板就会断裂 示例1-预期外观： 例2-破损： 如何配置网格以实际执行正确的操作，而不考虑其内容在默认情况下的行为？您需要包括网格模板列属性： html，正文{ 保证金：0自动； } /*布局材料*

我正在尝试组合一个绝对简单的布局，看起来我被一个p标记阻止了，该标记将容器拉伸到网格布局之外，而不是预期的行为（包装）

以下是一些基本代码：

HTML:

我的理解是，这个网格模板区域基本上是说，“每行有5个相等的分数单位，主网格始终取中间的三个

然而，实际发生的情况是，如果“某些文本”被拉长，模板就会断裂

  • 示例1-预期外观：
  • 例2-破损：
如何配置网格以实际执行正确的操作，而不考虑其内容在默认情况下的行为？

您需要包括
网格模板列
属性：

html，正文{
保证金：0自动；
}
/*布局材料*/
标题{网格区域：h；}
页脚{网格区域：f；}
主{网格区域：m；}
.顶级包装器{
显示：网格；
网格模板列：重复（5，1fr）；
网格模板区域：
“h”
“.m。”
“f”；
}
/*仅限化妆品-您可以忽略下面的内容*/
页眉、页脚{
背景色：深蓝色；
颜色：白色；
}
主要{
边框：3倍纯红；
背景颜色：灰色；
}

我是头球！
一些页面标题

一些文本。还有一些，越来越多，越来越多，直到这一段，这真的应该是包装，反而会延长主要部分，打破模板的合同。


我是一只脚！
您需要包括
网格模板列
属性：

html，正文{
保证金：0自动；
}
/*布局材料*/
标题{网格区域：h；}
页脚{网格区域：f；}
主{网格区域：m；}
.顶级包装器{
显示：网格；
网格模板列：重复（5，1fr）；
网格模板区域：
“h”
“.m。”
“f”；
}
/*仅限化妆品-您可以忽略下面的内容*/
页眉、页脚{
背景色：深蓝色；
颜色：白色；
}
主要{
边框：3倍纯红；
背景颜色：灰色；
}

我是头球！
一些页面标题

一些文本。还有一些，越来越多，越来越多，直到这一段，这真的应该是包装，反而会延长主要部分，打破模板的合同。


我是一只脚！
您正在使用它来构建网格。这将布置列和行

但是，如果不定义每列的宽度，它们将默认为
auto
（即内容长度）。第二行的第一列和最后一列没有内容，因此它们只是折叠。然后中间的三列将占用该行的所有空间

您需要使用
网格模板列
来获得所需的行为。如果将每列设置为
1fr
，则该行将被划分为五个等宽列

html，正文{
保证金：0自动；
}
/*布局材料*/
标题{网格区域：h；}
页脚{网格区域：f；}
主{网格区域：m；}
.顶级包装器{
显示：网格；
网格模板区域：
“h”
“.m。”
“f”；
网格模板列：重复（5，1fr）；/*新建*/
}
/*仅限化妆品-您可以忽略下面的内容*/
页眉、页脚{
背景色：深蓝色；
颜色：白色；
}
主要{
边框：3倍纯红；
背景颜色：灰色；
}

我是头球！
一些页面标题

一些文本。还有一些，越来越多，越来越多，直到这一段，这真的应该是包装，反而会延长主要部分，打破模板的合同。


我是一只脚！
您正在使用它来构建网格。这将布置列和行

但是，如果不定义每列的宽度，它们将默认为
auto
（即内容长度）。第二行的第一列和最后一列没有内容，因此它们只是折叠。然后中间的三列将占用该行的所有空间

您需要使用
网格模板列
来获得所需的行为。如果将每列设置为
1fr
，则该行将被划分为五个等宽列

html，正文{
保证金：0自动；
}
/*布局材料*/
标题{网格区域：h；}
页脚{网格区域：f；}
主{网格区域：m；}
.顶级包装器{
显示：网格；
网格模板区域：
“h”
“.m。”
“f”；
网格模板列：重复（5，1fr）；/*新建*/
}
/*仅限化妆品-您可以忽略下面的内容*/
页眉、页脚{
背景色：深蓝色；
颜色：白色；
}
主要{
边框：3倍纯红；
背景颜色：灰色；
}

我是头球！
一些页面标题

一些文本。还有一些，越来越多，越来越多，直到这一段，这真的应该是包装，反而会延长主要部分，打破模板的合同。


我是一只脚！
Ah nice，谢谢！出于某种原因，我错误地将其回忆为“要么/要么”，其中默认行为是相等空间。添加了一个重复（5，1fr），它做了正确的事情。谢谢！Ah nice，谢谢！出于某种原因，我错误地将其回忆为“要么/要么”，其中默认行为是相等空间。添加了一个重复（5，1fr）它做了正确的事。谢谢！ 
<div class="top-level-wrapper">
  <header>I am a header!</header>
  <main>
    <h3>Some page title</h3>
    <p>
      Some text.
    </p>
  </main>
  <footer>I am a footer!</footer>
</div>

html, body {
  margin: 0 auto;
}

/* Layout stuff. */
header {grid-area: h;}
footer {grid-area: f;}
main {grid-area:m;}
.top-level-wrapper {
  display: grid;
  grid-template-areas:
    "h h h h h"
    ". m m m ."
    "f f f f f";
}