Помогите с HTML или CSS разметкой

И всё прочее, что касается HTML
Правила форума
Убедительная просьба юзать теги [code] при оформлении листингов.
Сообщения не оформленные должным образом имеют все шансы быть незамеченными.
Разметчик
проходил мимо

Помогите с HTML или CSS разметкой

Непрочитанное сообщение Разметчик » 2013-08-25 19:57:40

Друзья, прошу помощи!
Вопрос возможно тупой, но решения не знаю.
Что надо:
Вывод списка контактов. Каждый контакт - это прямоугольник с бордюром в 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>

Аватара пользователя
Alex Keda
стреляли...
Сообщения: 34889
Зарегистрирован: 2004-10-18 14:25:19
Откуда: Made in USSR
Контактная информация:

Помогите с HTML или CSS разметкой

Непрочитанное сообщение Alex Keda » 2015-12-30 8:21:00

Сделайте таблицей и не мучайтесь
Убей их всех! Бог потом рассортирует...

Аватара пользователя
NoResponse
мл. сержант
Сообщения: 76
Зарегистрирован: 2007-07-30 1:39:02
Контактная информация:

Помогите с HTML или CSS разметкой

Непрочитанное сообщение NoResponse » 2016-01-03 7:52:49

нее лис, просто таблицей не получится )
и рановато ты начал отмечать нг, раз тему из нафталина вытащил )
а по теме. имхо колонки спасут, но и тут есть свои минусы

Код: Выделить всё

<!----Контакт 1 ---->
<div style="width: 200px; float: left">
<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>
</div>

<div style="width: 200px; float: left">
<!----Контакт 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>
</div>

<div style="width: 200px; float: left">
<!----Контакт 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>
Я сам по себе скопище энтропии. А по законам термодинамики, если не принимать никаких действий энтропия стремится к бесконечности. Похоже, так оно и есть.


Вернуться в «PHP, PERL, JS, HTML...»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя