我想知道列的计算是什么
注意:
我正在使用骨骼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列应该大于它们。因此,我正在尝试实现更大的方框或栏。希望你明白我的意思。
问题:
最佳答案
我可能错了,但是根据大多数网格系统的工作方式,在这种情况下,最大列数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内查找的两列布局。