про float и width

D.S.Denton · May 18, 2007

хреновый все-таки из меня дизайнер. имеем:

.pic {float:left; padding:4px;
 margin:6px; background-color:#3c3c3c;
 border:1px solid #bdbdbd;}

<div class="pic">
 <a>
 <img>

 text
 </a>

 text
</div>

глюк - идут подряд картинки. пока размер одинаковый все нормально. как только встречается вместо 150*113 вертикальная 113*150, следующие две 150*113 благодаря float позиционируются вертикально и прилипают друг к другу.

очевидное решение - задать постоянную высоту, одинаковую для всех картинок. ну, 150px+13pt+11pt примерно 185px. ширина 150px+4px*2(padding)+1px*2(border)=160px. чтоб избежать большого фона снизу, вводим внешний контейнер. получилось:

.piccont {float:left; width:152px;
 height:185px; border:0;
 padding:4px; margin:6px;}
.pic {background-color:#3c3c3c;
 border:1px solid #bdbdbd;}

<div class="piccont">
<div class="pic">
 <a>
 <img>

 text
 </a>

 text
</div>
</div>

теперь благодаря одинаковой высоте всех float-контейнеров ничего не липнет куда не надо, зато по горизонтали .pic имеют 100% от родительского... что хоть и понятно, но вместо пустоты снизу получили ее же справа у вертикальных картинок

Fu-tai · May 20, 2007

А если к примеру сделать привью картинок более или менее одинаковыми по размерам, то и мучаться не надо! Ну или на крайний случай блоки под привью сделать одинаковыми, а сами привью можно и разными! к тому же вертикальные фотки не вписываются (ч?б не фотографировать как задумано, нада обязательно повертеть камеру хотябы в одной плоскости?!!!)

D.S.Denton · May 20, 2007

Quote
привью картинок более или менее одинаковыми по размерам

мм... там планируется свободная закачка фото, превьюшки делаются модулем Image Magic (встроенная фича GD не всегда корректно с цветами обходится как выяснилось). а в IM я не разобрался толком

собсна вот так... http://denton.msk.ru/gallery/ в отладочных целях у внешнего контейнера красный бордер. если посмотреть в ИЕ, иногда фигня с флоатом проявляется по-прежнему (например 4 и 5 фото). везде в остальных браузерах нормально. у кого ие7 откомменьте плиз, в нем тоже глюкает?

Fu-tai · May 20, 2007

В ИЕ выпадают 5,6,7 фото ниже 8го фото!

Скорее всего чего-то у тя с флоатом, и рзмером внешней таблицы! Покрайней мере копать нада там! Самому копаться лень! Извини!

Убери белую рамку внутри красного блока, смотрится лучше!

Игра прикольная, но всетаки такого драйва как в Цивилизации или IG и HW не чувствую!

Но все равно прикольно!

D.S.Denton · May 21, 2007

Quote
5,6,7 фото ниже 8го

точнее 6,7,8 ниже 5го:+)

а насколько "приличным" будет задать превьюшки в виде бэкграунда для блоков? глюк исчезнет, но коректно ли это?

D.S.Denton · May 23, 2007

эх... пришел к такому варианту:

.piccont {float:left; border:0;
 margin:6px; width:160px;
 height:200px;}
.piccont table {width:1px;}
.piccont div {white-space:nowrap;}
.pic {width:auto; background-color:#3c3c3c;
 border:1px solid #bdbdbd; font-size:10pt;}


<div class="piccont">
 <table align="center"><tr><td class="pic">
 <a><img></a>

 <div><a>text</a></div>
 <div>text</div>
 </td></tr></table>
</div>

нормально работает в IE6.0, FF2.0.0.x, SM1.0.6, Opera8.5/9.1

Scrum · May 23, 2007

случаем не так должно быть ?

<!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[*/
 .piccont_all {
 background-color: red;
 float: left;
 }
 .pic {
 background-color: green;
 margin: 10px;
 float: left;
 height: 185px;
 width: 160px;
 }

 .pic p {
 margin: 0;
 }
 /*]]>*/
 </style>
</head>

<body>


<div class="piccont_all">
 <div class="pic">
 <img /><p>новый сервер</p><p>800x600 70k</p>
 </div>
 <div class="pic">
 <img /><p>новый сервер</p><p>800x600 70k</p>
 </div>
 <div class="pic">
 <img /><p>новый сервер</p><p>800x600 70k</p>
 </div>
 <div class="pic">
 <img /><p>новый сервер</p><p>800x600 70k</p>
 </div>
 <div class="pic">
 <img /><p>новый сервер</p><p>800x600 70k</p>
 </div>
 <div class="pic">
 <img /><p>новый сервер</p><p>800x600 70k</p>
 </div>
 <div class="pic">
 <img /><p>новый сервер</p><p>800x600 70k</p>
 </div>
</body>

</html>

D.S.Denton · May 23, 2007

Quote
случаем не так должно быть ?

нууу... не совсем. тут остается фиксированная ширина контейнера и следовательно много лишнего фона у .pic. таблицей это обходится проще.. а вот момент насчет

с маргином=0 сейчас позаимствую, спасибо

результаты (43кб)

Scrum · May 23, 2007

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

кукумбер · May 23, 2007

В ИЕ7 плохо. Лесенка.

Никогда не пойму людей, которые страницу с превьюшками верстают блоками. Ананизм.

D.S.Denton · May 23, 2007

ну по крайней мере в ИЕ6 пофиксил. на 7-й пока можно и забить. зато как без блоков сделать страницу превьюшек, более-менее нормально выглядящую в 640*480 (да-да, у нас такие есть, причем немало, это не дестини-сфера, где минимум 1024*768 надо)?

кукумбер · May 23, 2007

Не вижу проблемы. Создаешь таблицу с одной ячейкой по ширине браузера и вставляешь картинки.

D.S.Denton · May 23, 2007

иии....? там так и есть

. то, что Scrum обозвал

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

Sign In

про float и width

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information