当前位置: 首页 > 面试题库 >

当第二列不存在时如何使列跨度全宽?(CSS网格)

董和泽
2023-03-14
问题内容

我知道也有类似的问题,但这是专门问如何使用CSS Grid Layout做到这一点。

因此,我们有以下基本网格设置:

HTML(带有侧边栏):

<div class="grid">

  <div class="content">
    <p>content</p>
  </div>

  <div class="sidebar">
    <p>sidebar</p>
  </div>

</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: 1fr 200px;
}

要创建看起来像这样的布局:

| content               | sidebar |

如果页面没有侧边栏,即。html看起来像这样,但是具有相同的CSS:

HTML(无边栏):

<div class="grid">

  <div class="content">
    <p>content</p>
  </div>

</div>

页面布局看起来像这样(破折号代表空白)

| content               | ------- |

我知道为什么这样做,网格列仍在grid-template-columns规则中定义。

我只是想知道如何告诉网格,如果没有内容,则填充剩余空间,类似于的flex-grow工作原理flexbox

如果没有侧边栏,则期望的结果将看起来像这样。

| content                         |

问题答案:

我想我现在已经知道了这个问题的明确答案。到目前为止,答案存在的问题是它们没有解释如何处理位于主要内容左侧的侧边栏(主要是因为我在原始问题中并未提出要求)。

<div class="grid">

  <nav>
    <p>navigation</p>
  </nav>

  <main>
    <p>content</p>
  </main>

  <aside>
    <p>sidebar</p>
  </aside>

</div>

您可以使用以下CSS:

.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr fit-content(200px);
}

nav, aside {
  width: 100%;
}

/* ensures that the content will always be placed in the correct column */
nav { grid-column: 1; }
main { grid-column: 2; }
aside { grid-column: 3; }

这也是网格区域的好用例

.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr fit-content(200px);
  grid-template-areas: "nav content sidebar";
}

nav, aside {
  width: 100%;
}

/* ensures that the content will always be placed in the correct column */
nav { grid-area: nav; }
main { grid-area: content; }
aside { grid-area: sidebar; }

IE兼容版本如下所示:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
}

nav, aside {
  width: 100%; /* Ensures that if the content exists, it takes up max-width */
  max-width: 200px; /* Prevents the content exceeding 200px in width */
}

/* ensures that the content will always be placed in the correct column */
nav {
  -ms-grid-column: 1;
  grid-column: 1;
}

main {
  -ms-grid-column: 2;
  grid-column: 2;
}

aside {
  -ms-grid-column: 3;
  grid-column: 3;
}


 类似资料:
  • 我有一个有3列的网格。问题是第3列比其他两列更宽。都不是 网格-模板-列:重复(自动拟合,最小(33.33%,1fr)); 也不 网格自动列:33%; 工作,因为IE11不支持自动拟合和网格自动列。 在IE11中有没有替代的方法来实现这一点呢?多谢了。

  • 问题内容: 鉴于以下几点,我如何使我的最后一列自动调整大小?(最后一列应自动调整内容的宽度。假设我只有1 li元素应该收缩,而我只有3 li元素等等): CSS: 问题答案: 以下将解决您的问题: 灵活的基于类的解决方案 一种更灵活的解决方案是创建一个类,并将其应用于您要确保其内容适合一行的任何列: 然后在您的HTML中:

  • 问题内容: 我正在渲染以下CSS和HTML代码段。 问题是文本区域最终比父区域宽8像素(边框2像素+填充6像素)。有没有办法继续使用边框和填充,但是将的总大小限制为父级的宽度? 问题答案: 为什么不忘了这些技巧,而只使用CSS? 我经常使用的一种:

  • 嘿,我有一个网格,对于其中一个节点,我希望它能够占据整行。 但我似乎不知道如何使用GridPane.setColumnSpan(node,column span); 这是我的代码 这就是现在的样子 这就是我想要的样子 我将非常感谢任何帮助。谢谢

  • 问题内容: 在无序列表中: 允许添加class或style属性,但不允许填充文本以及添加或更改标签。 该页面正在使用Courier New呈现。 目标是在跨度后排列文本。 “ OR”的理由并不重要。 懒惰的动物文字可能包含在其他元素中,但我必须仔细检查。 问题答案: ul { 就像Eoin所说的那样,您需要在“空”跨度中放置一个不间断的空格,但是您不能为内联元素分配宽度,只能填充/边距,因此您需要

  • 我正在使用CSS网格布局,在尝试使文本框填充它所在的div容器时遇到了困难。它对某些控件(如GridView/GoogleMap)似乎工作得很好,但当我尝试使用TextBox时,它只填充一列的宽度,即使div填充了3-4列。 下面是网格容器的示例CSS,以及用于填充所有列的示例 此GooleMap控件在填充屏幕的所有列中正确显示(GridViews也正确显示) 但是,当我尝试插入宽度为100%的T