html - 列计算

扫码查看

我想知道列的计算是什么

注意:
我正在使用骨骼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列应该大于它们。因此,我正在尝试实现更大的方框或栏。希望你明白我的意思。

问题:
html - 列计算-LMLPHP

最佳答案

我可能错了,但是根据大多数网格系统的工作方式,在这种情况下,最大列数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内查找的两列布局。

10-05 20:39
查看更多