蓝图问题

Question

我有以下布局。第一行打印得很好，但是第二行的开头应该从第二行上的第二个div开始。如果我将第一行中最后一个div的跨度设置为3，则第二行可以正常打印。

父div是670像素，每个子div是160 (包括10px右边界)所有4个应该适合在一行中，但他们不是，这里有什么问题？

我基本想要一个17跨度的父div，每行4个子div，跨度为4。

<div id="parent" class="span-17 last>
   <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4">
  <span>content</content>
  <span> image </content>
</div>
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4 last">
   <span>content</content>
   <span> image </content>
   </div>
<!--row 2 starts -->
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4 last">
   <span>content</content>
   <span> image </content>
   </div>
</div>

Answer 1

除非您使用压缩器更改默认列数，否则Blueprint默认使用24列。另外，你应该在某个地方定义一个容器：

<div class="container">
    <div class="span-24 last">
        Header Row
    </div>
    <div class="span-4">
        Blank buffer div (to keep 24 cols)
    </div>
    <div class="span-4">
        Content 1
    </div>
    <div class="span-4">
        Content 2
    </div>
    <div class="span-4">
        Content 3
    </div>
    <div class="span-4">
        Content 4
    </div>
    <div class="span-4 last">
        Another blank buffer
    </div>
</div>

基本上，您还应该确保所有列的总和始终为24。last声明不会填充任何缺少的列。您提到了一个包含4个span-4子级的span-17 div，这并不合理。您在其中缺少一列，这可能会产生未定义的结果，或者至少看起来很糟糕。

如果您不需要缓冲区<div>s，只需使用span-6 for each，它将4个块平均划分为24个。