Позиционирующие элементы в сетке

Для расширения DIV (.container) с диагональю 620 пикселей вам необходимо иметь несколько DIV-дисков шириной 200px (.item).Позиционирующие элементы в сетке

. Контейнер DIV должен соответствовать 3 .item DIVs в строке.
. Именные DIV должны быть ровно на расстоянии 10 пикселей друг от друга.
Между границей .container DIV и DIT-ключами непосредственно рядом с ним не должно быть пробелов.

См. Рисунок ниже для лучшего понимания.

Как бы вы это достигли - поля, стол ...?

alt text

источник

2011-01-12 Emanuil Rusev

Можете ли вы дать каждому третий пункт дополнительный класс? – polarblau

счастливы с использованием css3? –

Я думаю, что важно знать, что вокруг вашего элемента (620px dic), и как вы хотите, чтобы этот элемент взаимодействовал со своими соседями, потому что делать то, что вы хотите, может отличаться, если вам нужно положение: абсолютное или положение: относительное и т. Д. –

вы можете попробовать следующее, но в этом случае вы должны добавить 'маску', но нет необходимости в CSS3, ни добавление/удаления классов в зависимости от того, где элемент (другими словами, нет необходимости для любого типа сценариев, только чистый HTML/CSS):

HTML:

<div class='mask'> 
    <div class='container'> 
     <div class='item'></div> 
     <div class='item'></div> 
     <div class='item'></div> 
     <div class='item'></div> 
    </div> 
</div>

CSS:

.mask{border:10px solid #ddd;width:620px;overflow:hidden} 
.container{width:630px;background-color:#333;margin-top:-10px;overflow:hidden;float:left} 
.item{float:left;margin-right:10px;width:200px;height:100px;background-color:#4a6b82;margin-top:10px}

Попробуйте здесь: Demo

источник

2011-01-12 13:55:15 Dan

Это очень интересный подход. Спасибо за демо! –

Хотя это не требует «сценариев» (я предполагаю, что вы имеете в виду серверные скрипты здесь), этот дизайн может быть слишком жестким: когда содержимое элемента превышает поле, дизайн разбит: http: // www.jsfiddle.net/a3PnJ/8/. Кроме того, гораздо больше CSS здесь, чем необходимо (см. Мой пример ниже), я бы сказал, что добавление дополнительного класса каждый третий элемент является оправданным и семантически правильным. –

@Peter Kruithof, мне нравится ваш подход. На самом деле я его много использовал. Я нахожу подход Дэна интересным, потому что он кажется очень чистым и является тем, которого я не видел. –

Нет необходимости в таблице. Если это не табличные данные, то есть.

Поплавьте каждый div, придайте ему желаемую ширину и маржу и убедитесь, что последний div в строке не имеет этого поля. Вы можете выполнить это с помощью класса или с помощью псевдоселектора css :nth-child(3). Из-за отсутствия поддержки этого селектора я бы рекомендовал для него класс.

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

HTML:

<div class="container"> 
    <div class="row"> 
    <div class="item"/> 
    <div class="item"/> 
    <div class="item last"/> 
    </div> 
    <div class="row"> 
    <div class="item"/> 
    <div class="item"/> 
    </div> 
</div>

CSS:

.item { float: left; width: 200px; margin-right: 10px; } 
.last { margin-right: 0; }

источник

2011-01-12 13:04:45

Как насчет полей между строками? –

@ Emanuil настройка margin-top/margin-bottom;) – stecb

@steweb, конечно, но для этого потребуется другой класс. Разве это не слишком сложно для простой задачи, такой как размещение элементов в сетке? –

Позиционирующие элементы в сетке

ответ

Смежные вопросы