html - 列计算

Question

我想知道列的计算是什么

注意: 我正在使用 skeleton 2.0.4， 960 网格系统(12 列)

这是我正在尝试做的事情:

• 在四列 div 中，我想添加两个 2 列 div，在图片上显示为白色。

但是......有这个代码:

 <div class="container">
    <div class="header four columns">
      <div class="row">
        <div class="class two columns" style="background-color:white;">2 columns</div>
        <div class="class two columns" style="background-color:white;">2 columns</div>
        <div class="class two columns" style="background-color:white;">2 columns</div>
      </div>
    </div>
    <div class="content-top eight columns">
      <div class="row">
        <div class="three columns" style="background-color:white;">test</div>
        <div class="three columns" style="background-color:white;">test</div>
        <div class="three columns" style="background-color:white;">test</div>
        <div class="three columns" style="background-color:white;">test</div>
      </div>
    </div>
  </div>

那些(白色)2 列应该比它们大。所以我正在努力实现更大的盒子或柱子。希望你明白我的意思。

问题:

Answer 1

我可能是错的，但根据大多数网格系统的工作方式，在这种情况下，最大列数 12 始终是其容器的 100% 宽度。因此，要在该 div 中创建两列，它们实际上应该是 6 列。

<div class="container">
  <div class="header four columns">
    <div class="row">
      <div class="class six columns" style="background-color:white;">2 columns</div>
      <div class="class six columns" style="background-color:white;">2 columns</div>
    </div>
  </div>
  <div class="content-top eight columns">
    <div class="row">
      <div class="three columns" style="background-color:white;">test</div>
      <div class="three columns" style="background-color:white;">test</div>
      <div class="three columns" style="background-color:white;">test</div>
      <div class="three columns" style="background-color:white;">test</div>
    </div>
  </div>
</div>

我认为这将为您提供在左侧 div 中寻找的两列布局。