Question

我正在尝试学习响应式网格，并且很难掌握如何将项目放在＆＃34;列中。＆＃34;我和他们中的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>

我怎样才能做到这一点？带有＆＃34;空列＆＃34;的div在他们中显然是错误的，但我不知道如何获得适当的宽度。上面的链接表示每行中的列数最多应为12;这是否意味着我还需要指定空列？

Answer 1

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

<div>&nbsp;</div>

Answer 2

每行的总列数最多为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;
}

如果你去浮动方法，你需要使用clearfix。

<强>更新

我建议使用选项1，因为您将遇到更少的clearfixes和空列问题。见codepen

Answer 3

使用网格布局的最佳解决方案是利用其功能，而不是在html（DOM）中添加空元素。

在这个例子中，我们希望总共有12列，相同的宽度，其中first和last是空的，以及中间的4列： 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在四列上。点将各列设置为空。就是这样。

see at CodePen >>

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

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

响应网格中的空列？

3 个答案: