Несогласованные поля в откликающемся ряду divs

Question

Я строю карточный макет. Он от 5-4-3-2-1 пунктов в строке реагирует. Страница отвечает соответствующим образом, но у меня тяжелое время с полями для каждой карты.

Если я делаю margin: 1px; для создания пространства между элементами он создает огромные промежутки, а не малый запас. В текущем состоянии поля допустимы только в отношении 1 и 3 позиций. Все остальные управляют полями вместе. Я экспериментировал и везде, где я добавляю запас, он создает чрезмерно большой разрыв.

Подсказки? Предложения? Есть ли фатальный недостаток?

Спасибо!

codepen: http://codepen.io/abrite/pen/gMaPPG

HTML для каждой карты:

<div class="item"> 
    <div class="cardheading"> 
    <h1>Alabama</h1> 
    </div> 
    <div class="cardcontent"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p> 
    </div> 
</div> 

Answer 1

Ни одна из ваших ширины коробки не позволяет использовать поля. 5 x 20% = 100%. 4 x 25% = 100% и т. Д.

Вам необходимо уменьшить ширину коробки и указать маржу слева или справа, чтобы обеспечить расстояние между ними, например: 5 x 18% = 90% + 5 x margin-left 1% и margin-right 1% = 100%.

Существует два способа добиться того, чего вы хотите, либо с помощью Flexboxes, либо с помощью объявлений Nth-child, которые помогут добавить маржи только к одной стороне поля, когда это первое или последнее поле в строке, так что строка растягивается до полной ширины.

Последний может стать особенно беспорядочным в нескольких мультимедийных запросах, поэтому я бы выбрал первый. Есть много обучающих онлайн-игр для flexboxes.

Вот 2 места, чтобы начать:

http://the-echoplex.net/flexyboxes

http://css-tricks.com/snippets/css/a-guide-to-flexbox

Answer 2

Не уверен, что именно то, что огромные пробелы вы имеете в виду здесь, но с добавлением маржи: 1px; на каждую карту добавляется 1 пиксель на каждую сторону карты. Если у вас есть две карты рядом друг с другом, каждая с краем 1 пикселя, вы получите 2 пикселя между картами. Если вам нужна только 1-кратная маржа, вы должны сделать что-то вроде margin-right: 1px для каждой карты, что создаст общий разрыв в 1px между картами.