0

我有以下布局。第一行打印得很好，但是第二行的开头从第二行的第二个 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>
4

1 回答 1

0

除非您使用压缩器更改默认列数，否则蓝图默认使用 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有 4 个孩子的 div span-4，这并没有加起来。您在那里缺少一列，这可能会产生未定义的结果，或者至少看起来很糟糕。

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

于 2010-06-23T20:01:46.203 回答