проект вопроса

Question

У меня есть следующая схема. первая строка отлично печатается, но начало второй строки начинается с того места, где должен находиться второй div во 2-й строке. Если я установил интервал последнего div в 1-й строке до 3, то второй отпечаток будет штрафом.

родительский div имеет 670 пикселей, а каждому ребенку 160 (включая правое поле 10px). Все 4 должны вписываться в строку, но это не так, что здесь не так?

Я хочу bassically родительский DIV из 17 пролетов с рядами 4 ребенка DIVS каждый с пролетом 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> s, просто использовать span-6 для каждого, которая делит 4 блоков равномерно на 24.