Question

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

父div是670像素，每个孩子是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声明未填写任何缺失的列。你提到span-17 div有4个span-4个孩子，但是没有加起来。你错过了一个列，这可能会产生不确定的结果，或者至少看起来很糟糕。

如果您不想要缓冲区<div>，请仅使用span-6，将4个块均分为24个。

蓝图问题

1 个答案: