Форум Сайтостроение Веб-строительство

Новости в несколько колонок CSS

ExVood
На сайте с 02.07.2013
Offline
39
ExVood
660

Здравствуйте!

Делаю новости в 3 колонки и столкнулся с проблемой:

Блоки должны отображаться по размеру шаблона, т.е. по красную линию, а там отступ..

Делал следующим образом:


<div class="content">
width: 33%;
float: left;

<div class="link">

position: relative;
background-color: rgb(245, 245, 245);
display: block;
margin: 0px 15px 15px 0px;
text-align: center;
padding: 6px 8px 6px 6px;
border: 1px solid rgb(183, 183, 183);
color: rgb(187, 187, 187);
border-radius: 4px 4px 4px 4px;

</div></div>

Как выходит, так не катит...(

Подскажите пожалуйста, как сделать правильно не используя скрипты...

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#1
ExVood:
Подскажите пожалуйста, как сделать правильно не используя скрипты...

вариантов-то куча.. можно подсмотреть реализации

1. у левой - float:left, у правой - float:right у средней - margin:0 auto;

2. у последней (.last) убрать margin-right

3. у контейнера сделать фиксированную ширину и overflow-x:hidden (чтоб margin за экран ушёл).. как вариант - доп контейнер с margin-right:-15px;

p.s. width: 33%;, т.е. блоки 99%, а оставшийся 1% на 3 margin-а по 15px? ничего нигде не ползёт при изменении ширины?

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
Google: как сделать статические Как сделать сайт удобным Новые условия размещения и
ExVood
На сайте с 02.07.2013
Offline
39
ExVood
#2
ivan-lev:
вариантов-то куча.. можно подсмотреть реализации
1. у левой - float:left, у правой - float:right у средней - margin:0 auto;
2. у последней (.last) убрать margin-right
3. у контейнера сделать фиксированную ширину и overflow-x:hidden (чтоб margin за экран ушёл).. как вариант - доп контейнер с margin-right:-15px;

p.s. width: 33%;, т.е. блоки 99%, а оставшийся 1% на 3 margin-а по 15px? ничего нигде не ползёт при изменении ширины?

Нет, ничего не ползет, шаблон резина - блоки просто уменьшаются...

2. у последней (.last) убрать margin-right

Можно поподробнее, как это реализовать?

Q8
На сайте с 02.08.2012
Offline
31
q8888
#3
ExVood:
Можно поподробнее, как это реализовать?

скорее всего имелось в виду прописывать для третьего блока дополнительный класс. но, насколько я вижу, это не Ваш случай. судя по скрину, блоков намного больше, чем три, и все лишние смещаются на следующую строку за счет флоатинга. формирование блоков идет по одному стандартному шаблону, и вручную добавлять класс для каждого третьего блока проблематично.

лучше конечно дописать скрипт для цикла, который бы вел подсчет порядкового номера блока. в случае, если блок третий - дописывать ему класс .last и далее обнулять счетчик для следующей порции блоков. это все по второму варианту.

можно еще попробовать обернуть блоки в div c нулевыми отступами и задавать им ширину в 33,3% (правда, не уверен, что все браузеры понимают доли процентов). попробуйте. а внутри этих "оберток" уже оперировать с отступами

Исследование: влияние новых рекламных Зачем e-commerce нужны рекламные Управление ставками в контекстной

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий