Остановить прорыв коробки на следующую строку из-за дополнительной маржи?

Question

Не уверен, если это вообще возможно, но я думаю, что стоит спросить.

То, что я пытаюсь сделать, - это с легкостью создавать поля с помощью моего PHP-скрипта, где мне не нужно проверять, к какому столбцу, строке и т. Д. Принадлежит каждый блок (.boxes). Я просто хочу иметь возможность делать цикл foreach из блоков и echo их.

Вот о чем я говорю: http://jsfiddle.net/LUFFP/4/

В этом примере вы видите, что я пытаюсь заставить wrapper (#main) игнорировать margin-right и иметь два поля в строке, без лишних пробелов справа, без необходимости назначать разные классы для каждого другого DIV.

Любая помощь приветствуется.

Answer 1

Вы можете использовать nth-of-type(2n), чтобы предназначаться для каждого другого div.Затем установите правильное поле на ноль.

http://jsfiddle.net/LUFFP/5/

.boxes_3:nth-of-type(2n) { margin-right: 0px; }

Answer 2

#main_2
{
    background: #FF0000;
    width: 404px;
    border: 1px solid #000;
    overflow: hidden;
}

.boxes_2
{
    background: #F3F3F3;
    width: 195px;
    display: inline-block;
    margin-right: 10px;
}

Обратите внимание, что я изменил ширину и установил переполнение скрытым. Никаких особых требований к CSS3.

Answer 3

В зависимости от требований вашего браузера для этого есть селектор CSS3: http://jsfiddle.net/ttpK6/1/

Список совместимости здесь: http://kimblim.dk/css-tests/selectors/

Answer 4

попробуйте

 #main_2 {background: #FF0000; width: 411px;  border: 1px solid #000;}
.boxes_2 {background: #F3F3F3; width: 205px;  float:left;}