响应式网格中的空列？

Question

我正在尝试学习响应式网格，但难以掌握如何在“列”中放置项目。我正在与其中的 12 个合作，看起来像这里的一个：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

例如，我想在左侧有一行网站名称，右侧是导航栏：

<div class="row">   
   <div class="col-1">empty column acting as margin; do i need a div for this?</div>
   <div class="col-2" id="name">
       website name
   </div>
   <div class="col-4">another set of empty columns</div>
   <div class="col-4" id="navbar">
      <a href="home.html">Home</a>
      <a href="about.html">About</a>
      <a href="page3.html">Page 3</a>
   </div>
   <div class="col-1">empty column as margin</div>
</div>

我怎样才能做到这一点？其中带有“空列”的 div 显然是错误的，但我不确定如何获得正确的宽度。上面的链接说每行的列数加起来应该是 12；这是否意味着我也需要指定空列？

Answer 1

市长浏览器会忽略空 div 的宽度，避免这种行为的简单方法是将   添加到空 div。

<div>&nbsp;</div>

Answer 2

使用网格布局的最佳解决方案是利用它的强大功能，而不是在 html (DOM) 中添加空元素。

在此示例中，我们希望总共有 12 列，相同宽度，其中第一个和最后一个为空，以及中间的四列： 1 2 4 4 1

HTML代码：

<div class="grid-example">
    <div class="col-2" id="name">
        website name
    </div>
    <div class="col-4" id="navbar">
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
        <a href="page3.html">Page 3</a>
    </div>
</div>

CSS 代码：

.grid-example {
    ...
    grid-template-areas: ". nm nm . . . . nvb nvb nvb nvb ."; 
}
.grid-example #name {
    grid-area: nm;
}
.grid-example #navbar {
    grid-area: nvb;
}

这是什么意思： 在 html 中只有有用的元素没有多余的空元素。 CSS是这里的主人。子 div 被分配到具有（短）名称的网格区域。现在使用属性 grid-template-areas，#name div 设置为分布在两列上，#navbar div 设置在四列上。 Dots 将相应的列设置为空。就是这样。

see at CodePen >>

类似的原则可以用于行，列不必相同，元素可以分配给任何单元格区域等。基本上网格对于将任何元素分布在任何网格区域上非常有用。

注意：.row 类有弹性布局，所以这里不需要。

Answer 3

每行的列总数应为 12，因为每列等于 1/12 of 100% (8.333%)

在您的示例中，您的列数正确：

col-1 | column count: 1
col-2 | column count: 3
col-4 | column count: 7
col-4 | column count: 11
col-1 | column count: 12

总列数 = 12

要内联显示列，列 div 必须有额外的 css 来覆盖默认的display: block;

选项 1（显示内联块）：

[class*="col-"] {
    display: inline-block;
    margin-right: -0.2em; /* small hack to fix inline block spacing */
}

选项 2（浮动）：

[class*="col-"] {
    float: left;
}

如果您使用 float 方法，则需要使用 clearfix。

更新

我会推荐选项 1，因为您会遇到较少的 clearfixes 和空列问题。看到这个codepen