蓝图问题

Question

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

父div是670像素，每个孩子160（包括10px右边距）所有4应该适合在一排，但他们不是，这里有什么错？

我bassically想除非你使用的压缩机来改变默认的列数17个跨度有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

跨度，蓝图使用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> S，只需使用span-6每个，其将4块均匀地进入24