forum.lissyara.su

Сталина давно нэт. Чтоби спасти Россию, ищитэ его внутри сэбя...
https://forum.lissyara.su/

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

https://forum.lissyara.su/viewtopic.php?f=17&t=39976

Страница 1 из 1

Помогите с 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>

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

Добавлено: 2015-12-30 8:21:00
Alex Keda
Сделайте таблицей и не мучайтесь

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

Добавлено: 2016-01-03 7:52:49
NoResponse
нее лис, просто таблицей не получится )
и рановато ты начал отмечать нг, раз тему из нафталина вытащил )
а по теме. имхо колонки спасут, но и тут есть свои минусы

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

<!----Контакт 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>

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

Добавлено: 2019-10-25 14:15:59
Melmanrhync
Это то где отображается дата выхода оценка и т.д

Код:

<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>

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

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

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

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

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

<!----Контакт 1 ---->
<div style="width: 10%;">
И будет счастье...
Часовой пояс: UTC+03:00
Страница 1 из 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/