Верска дивами: 3 столбца

Статус
В этой теме нельзя размещать новые ответы.
пробел появляется потому что высота одной картинки разная, вот за неё и цепляется, например

HTML: 
<div style="width:310px;border: 1px solid #FF0000;">
<div style="float:left;height: 100px;width: 100px;border: 1px solid #00FF00;">adada</div>
<div style="float:left;height: 120px;width: 100px;border: 1px solid #0000FF;">adada</div>
<div style="float:left;height: 100px;width: 100px;border: 1px solid #00FF00;">adada</div>
<div style="float:left;height: 100px;width: 100px;border: 1px solid #00FF00;">adada</div>
<div style="float:left;height: 100px;width: 100px;border: 1px solid #00FF00;">adada</div>
<div style="float:left;height: 100px;width: 100px;border: 1px solid #00FF00;">adada</div>
<div style="float:left;height: 100px;width: 100px;border: 1px solid #00FF00;">adada</div>
<div style="float:left;height: 100px;width: 100px;border: 1px solid #00FF00;">adada</div>
</div>
надо или ставить clear:both после каждой строки, или выровнять высоту например с максимальной высотой div рамкой, или каждую строку картинок вставлять в дополнительный div.
 
Значит по совету BDS все должно работать
Нажмите для раскрытия...
Мен это только 1 тестовая партия .... и я уверен в том что еще накидаю других картинок.

А насчет пробелов лучше код посмотреть. Да я см смотрю в него уже кучу раз. но если кто посмотрит и подскажет что не так, буду оч. благодарен
 

Вложения

  • div.zip
    279,4 KB · Просмотры: 6
В точку)) У второй картинки высота 161px, а у остальных 160px
Нажмите для раскрытия...
Вот тебе и ресайсинг картинок. Понял свою проблему ... 1 пиксел всю малину портит.

Подскажите еще как грамотно в таком случае использовать clear:both ??? Вставлять после каждого дива?
 
можно указать высоту всех дивов больше чем максимальная высота всех картинок, например картинка может быть любой высоты, но не больше 170px, тогда просто добавляем высоту для дива картинки 170px в файл стилей gallery.css:

#cat .catItem {
width: 33%; float: left;
margin: 0 0 10px; 0;
height: 170px;
}

даже если картинка будет больше 170px в высоту на распорядок это не повлияет.

А если надо чтоб все были одинаковой высоты то можно прятать кусок картинки через overflow:

#cat .catItem {
width: 33%; float: left;
margin: 0 0 10px; 0;
height: 160px;
overflow: hidden;
}
 
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>

<style type="text/css">
/*<![CDATA[*/
div.gallery {overflow: hidden; _zoom: 1;}
div.gallery a {float: left; width: 33%;}
div.gallery a img {display: block; margin: 10px auto;}
/*]]>*/
</style>
</head>

<body>
  <div class="gallery">
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
     <a href="ya.ru"><img src="http://img-fotki.yandex.ru/getx/10000/photoface.22/likayou_14073_teaser" alt="" /></a>
...
   </div>
</body>

</html>
 
TS.ka написал(а):
В точку)) У второй картинки высота 161px, а у остальных 160px
Нажмите для раскрытия...
А чтобы каждый раз в код не лазить поставь оперу и включи: видимый контур у элементов (в режиме отображения)
если честно то это очень сильно ускоряет верстку дивами.
 
asmas написал(а):
А чтобы каждый раз в код не лазить поставь оперу и включи: видимый контур у элементов (в режиме отображения)
если честно то это очень сильно ускоряет верстку дивами.
Нажмите для раскрытия...

Опиши пожалуйста подробнее, у себя полазил в опере - но так и не нашел этой опции, версия оперы 9.61
 
Зачем извращаться с дивами когда есть таблицы?
Имхо смешанная верстка рулит.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху