Помогите с 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>
Вернуться к началу
Хостинговая компания Host-Food.ru
Хостинг HostFood.ru
 

Услуги хостинговой компании Host-Food.ru

Хостинг HostFood.ru

Тарифы на хостинг в России, от 12 рублей: https://www.host-food.ru/tariffs/hosting/
Тарифы на виртуальные сервера (VPS/VDS/KVM) в РФ, от 189 руб.: https://www.host-food.ru/tariffs/virtualny-server-vps/
Выделенные сервера, Россия, Москва, от 2000 рублей (HP Proliant G5, Intel Xeon E5430 (2.66GHz, Quad-Core, 12Mb), 8Gb RAM, 2x300Gb SAS HDD, P400i, 512Mb, BBU):
https://www.host-food.ru/tariffs/vydelennyi-server-ds/
Недорогие домены в популярных зонах: https://www.host-food.ru/domains/
Вернуться к началу
Аватара пользователя
Alex Keda
стреляли...
Сообщения: 35469
Зарегистрирован: 2004-10-18 14:25:19
Откуда: Made in USSR
Контактная информация:
Контактная информация пользователя Alex Keda

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

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

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

Помогите с 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>
Я сам по себе скопище энтропии. А по законам термодинамики, если не принимать никаких действий энтропия стремится к бесконечности. Похоже, так оно и есть.
Вернуться к началу
Melmanrhync
проходил мимо

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

Непрочитанное сообщение Melmanrhync » 2019-10-25 14:15:59

Это то где отображается дата выхода оценка и т.д

Код:

<link rel="stylesheet" href="style.css" type="text/css" />
<div id="body">
<div id="left2"><span style="color: #ffffff;">Название</span></div>
<div id="right2"><span style="color: #ffffff;">Дата выхода</span></div>
<div id="center2"><span style="color: #ffffff;">Оценка посетителей</span></div>
</div>
Вернуться к началу
Demis
прапорщик
Сообщения: 496
Зарегистрирован: 2015-05-25 14:36:32

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

Непрочитанное сообщение Demis » 2020-01-30 19:17:35

Ну так вроде этим первый див рулит:
Разметчик писал(а): ↑
2013-08-25 19:57:40
 <!----Контакт 1 ---->
<div style="width: 800px;">
Замени на что-то вроде

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

<!----Контакт 1 ---->
<div style="width: 400px;">
или

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

<!----Контакт 1 ---->
<div style="width: 10%;">
И будет счастье...
Вернуться к началу