Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?
Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Помогите пожалуйста с вертикальным выравниванием div'ов

Модерирует : Cheery

 Версия для печати • Подписаться • Добавить в закладки

Открыть новую тему     Написать ответ в эту тему

goshanecr



Junior Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Помогите пожалуйста!
Вопрос возможно тупой, но решения не знаю.
Что надо:
Вывод списка контактов. Каждый контакт - это прямоугольник с бордюром в 1px.  
Количество информации для разных контактов разное, потому высота каждого прямоугольника с контактом разная.
Ширина всех прямоугольников одинаковая (190px).
Итак проблема:
Мне надо чтобы эти прямоугольники располагались друг под другом. А они располагаются в ряд выровненный по вертикали последним правым div'ом.  
Для наглядности моих сумбурных объяснений прикладываю кусок html, который в браузере демонстрирует проблему.
Контакт 4 выравнивается отлично, а вот контакты 5 и 6 выровнены по низу 4-го.  
Подскажите пожалуйста мастера веб-дизайна как эту глупость победить!
 

Код:
<!----Контакт 1 ---->
<div style="width: 800px;">
<div style="width: 190px; border: 1px solid #cccccc; float: left; margin: 5px; font-size: 9pt;">
  <div style="width: 100%; background: #ededed;" >Контакт</div>
  <div style="font-size: 8pt; text-decoration: underline;">E-Mail:</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Рабочая почта</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">тыры-пыры@тыц.рф</div>
  <div style="font-size: 8pt; text-decoration: underline;">Веб-сайт:</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Сайт</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">http://тыц.рф</div>
</div>
<!----Контакт 2 ---->
<div style="width: 190px; border: 1px solid #cccccc; float: left; margin: 5px; font-size: 9pt;">
  <div style="width: 100%; background: #ededed;" >Контакт 2</div>
  <div style="font-size: 8pt; text-decoration: underline;">E-Mail:</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Рабочая почта</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">тыры-пыры@тыц.рф</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Ещё почта почта</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">тыры-пыры@тыц.рф</div>
  <div style="font-size: 8pt; text-decoration: underline;">Веб-сайт:</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Сайт</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">http://тыц.рф</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">http://тыц2.рф</div>
</div>
<!----Контакт 3 ---->
<div style="width: 190px; border: 1px solid #cccccc; float: left; margin: 5px; font-size: 9pt;">
  <div style="width: 100%; background: #ededed;" >Контакт 3</div>
  <div style="font-size: 8pt; text-decoration: underline;">Веб-сайт:</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Сайт</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">http://тыц.рф</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">http://тыц2.рф</div>
</div>
<div style="width: 190px; border: 1px solid #cccccc; float: left; margin: 5px; font-size: 9pt;">
  <div style="width: 100%; background: #ededed;" >Контакт 4</div>
  <div style="font-size: 8pt; text-decoration: underline;">E-Mail:</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Рабочая почта</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">тыры-пыры@тыц.рф</div>
  <div style="font-size: 8pt; text-decoration: underline;">Веб-сайт:</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Сайт</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">http://тыц.рф</div>
</div>
<!----Контакт 5 ---->
<div style="width: 190px; border: 1px solid #cccccc; float: left; margin: 5px; font-size: 9pt;">
  <div style="width: 100%; background: #ededed;" >Контакт 5</div>
  <div style="font-size: 8pt; text-decoration: underline;">E-Mail:</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Рабочая почта</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">тыры-пыры@тыц.рф</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Ещё почта почта</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">тыры-пыры@тыц.рф</div>
  <div style="font-size: 8pt; text-decoration: underline;">Веб-сайт:</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Сайт</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">http://тыц.рф</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">http://тыц2.рф</div>
</div>
<!----Контакт 6 ---->
<div style="width: 190px; border: 1px solid #cccccc; float: left; margin: 5px; font-size: 9pt;">
  <div style="width: 100%; background: #ededed;" >Контакт 6</div>
  <div style="font-size: 8pt; text-decoration: underline;">Веб-сайт:</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; color: #adadad; font-weight: lighter;">Сайт</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">http://тыц.рф</div>
  <div style="font-size: 8pt; width: 100%; text-align: right; ">http://тыц2.рф</div>
</div>
</div>

Всего записей: 156 | Зарегистр. 11-03-2007 | Отправлено: 15:16 28-08-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
goshanecr
не забывайте испоьзовать clear: both или clear: left и clear: right
 
http://jsfiddle.net/S6JdN/
 

Код:
<div style="clear:both; width: 190px; border: 1px solid #cccccc; float: left; margin: 5px; font-size: 9pt;">  


----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 22:08 28-08-2013 | Исправлено: Cheery, 22:08 28-08-2013
xpt

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
взять 4 контейнера с display:inline-block, чтобы располагались по горизонтали, и внутрь них засунуть остальные
Всего записей: 14 | Зарегистр. 27-08-2013 | Отправлено: 00:05 29-08-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
xpt

Цитата:
чтобы располагались по горизонтали,

автору вопроса это не нужно
 

Цитата:
Мне надо чтобы эти прямоугольники располагались друг под другом.



----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 00:41 29-08-2013
goshanecr



Junior Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Cheery спасибо, но по вашей ссылке там же все контакты стали в одну вертикальную строчку.  
Мне надо чтобы они заполнили по горизонтали сколько есть места (в моём примере 800px - 4 контакта) и потом с новой строки, только не все на одном уровне по вертикали а вплотную к контакту который над ними.
Т.е. получается чтобы контакты как плитки просто чтобы заполнили собой пространство.
Всего записей: 156 | Зарегистр. 11-03-2007 | Отправлено: 06:16 29-08-2013 | Исправлено: goshanecr, 06:18 29-08-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
goshanecr
ну так об этом и надо сразу говорить, ведь нет в первом сообщении ни слова.
для этого вам нужен список c заданной шириной, в котором элементы float: left
 
если же вы знаете, сколько элементов хотите разместить в строке, то..
 
http://jsfiddle.net/S6JdN/3/

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 07:21 29-08-2013 | Исправлено: Cheery, 07:24 29-08-2013
goshanecr



Junior Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Так у меня сейчас именно так как вы в примере показали. Но проблема в том что видите, там второй ряд контактов выровнен по вертикали по одному уровню, а мне надо чтобы каждый контакт по вертикали прижимался к тому что над ним.
Я думаю что предложение xpt сработало бы, но в идеале мне надо не заранее определённое количество колонок контактов, а чтобы они по float: left; по горизонтали размещались, когда ширины не хватает - шли на новую строку и там размещались прижимаясь к верхнему.
Всего записей: 156 | Зарегистр. 11-03-2007 | Отправлено: 09:05 29-08-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
goshanecr

Цитата:
Я думаю что предложение xpt сработало бы, но в идеале мне надо не заранее определённое количество колонок контактов, а чтобы они по float: left; по горизонтали размещались, когда ширины не хватает - шли на новую строку и там размещались прижимаясь к верхнему

 
это не сработает так, как вам хочется.
 
только если заранее делаете 3 или 4 столбца и лепите в каждом подряд (да, как и сказали выше - я все же не совсем сразу понял, что вы хотите)
 
либо можно с помощью javascript двигать, но не думаю, что это лучшее решение

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 09:19 29-08-2013 | Исправлено: Cheery, 09:22 29-08-2013
goshanecr



Junior Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Блин, грустно. Казалось бы простейшая задача а все эти css3 и html5 с ней справиться не могут
Ладно, буду как-то извращаться тогда.
Спасибо всем!
Если всё-же будут предложения или идеи, то я буду очень благодарен.
Всего записей: 156 | Зарегистр. 11-03-2007 | Отправлено: 09:28 29-08-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
goshanecr
ну с CSS3 есть возможность..
но это если вы расчитываете только на современные браузеры (в IE9 работать уже не будет)
http://stackoverflow.com/questions/17632051/vertically-stack-divs-in-different-columns-css-only
 
пример http://jsfiddle.net/tdwZe/

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 09:39 29-08-2013 | Исправлено: Cheery, 09:40 29-08-2013
goshanecr



Junior Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Cherry спасибо огромное! Именно в самое что ни на есть яблоко!
А по поводу совместимости, так у меня в опере отработало и для порльзования это во внутренней СРМ, и правила работы с ней пользователям диктую я, так что пользуются тем чем надо!
Спасибо огромное!
Можно этот пример только не удалять, я в него смотреть буду
Всего записей: 156 | Зарегистр. 11-03-2007 | Отправлено: 15:56 29-08-2013
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Помогите пожалуйста с вертикальным выравниванием div'ов


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru