蓝图问题

Question

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

父 div 是 670 像素，每个子 div 是 160（包括 10px 右边距）所有 4 个应该适合排成一行，但它们不是，这里出了什么问题？

我基本上想要一个 17 个跨度的父 div，其中有 4 行子 div，每个子 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，这并不能相加。您缺少其中的一列，这可能会产生未定义的结果，或者至少看起来很糟糕。

如果您不需要缓冲区

，只需对每个缓冲区使用 span-6，它将 4 个块均匀地分为 24 个。