[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: div'ы вывести в ряд и прижать по вертикали
logic
Всем привет,
вот такой код
<div style=' width: 830px; border: 1px solid red; float: left'>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top; '>
asdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
asdssfasdssfasdssfasdssfasdssf
asdssfasdssfasdssf
asdssfasdssfasdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
</div>

подскажите пожалуйста, как вывести по 4 в ряд и чтоб блоки след ряда были прижаты к верхним, даже если в верхнем ряду в середине был
блок с большим содержанием, надо чтоб все остальные все-равно прижимались максимально к верхним блокам, а не выравнивались по самому
большому.
sign63

<div>
<div
style="width: 200px; border: 1px solid red; vertical-align: top; float: left;">
asdssf
</div>
<div
style="width: 200px; border: 1px solid red; vertical-align: top; float: left;">
asdssf
</div>
<div
style="width: 200px; border: 1px solid red; vertical-align: top; float: left;">
asdssf
asdssfasdssfasdssfasdssfasdssf
asdssfasdssfasdssf
asdssfasdssfasdssf
</div>
<div
style="width: 200px; border: 1px solid red; vertical-align: top; float: left;">
asdssf
</div>
<div
style="width: 200px; border: 1px solid red; vertical-align: top; float: left;">
asdssf
</div>
<div
style="width: 200px; border: 1px solid red; vertical-align: top; float: left;">
asdssf
</div>
<div
style="width: 200px; border: 1px solid red; vertical-align: top; float: left;">
asdssf
</div>
<div
style="width: 200px; border: 1px solid red; vertical-align: top; float: left;">
asdssf
</div>
</div>


если не так опиши поподробнее + иногда лучше их в таблицу засовывать =)

_____________
user posted image
logic
вот, надо чтоб последний блок встал туда, куда указывает зеленая стрелка
user posted image
sign63
<table style="border: 1px solid red; width: 400px;">	
<tbody>
<tr>
<td
style="vertical-align: top;">
<div
style="border: 1px solid red; vertical-align: top;">
1 qqqq
</div>
<div
style="border: 1px solid red; vertical-align: top;">
2 dddd
</div>
<div
style="border: 1px solid red; vertical-align: top;">
3 ttggg
</div>
</td>
<td
style="vertical-align: top;">
<div
style="border: 1px solid red; vertical-align: top;">
asdssf
asdssfasdssfasdssfasdssfasdssf
asdssfasdssfasdssf
asdssfasdssfasdssf
</div>
</td>
<td
style="vertical-align: top;">
<div
style="border: 1px solid red;">
1 asdssf
</div><br>
</td>
<td
style="vertical-align: top;">
<div
style="border: 1px solid red;">
2 asdssf
</div>
</td>
<td
style="vertical-align: top;">
<div
style="border: 1px solid red;">
3 asdssf
</div>
</td>
</tr>
</tbody>
</table>

Так?

_____________
user posted image
Rock_N

<div style=' width: 830px; border: 1px solid red; float: left'>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top; '>
asdssf
<div style='width: 200px; border-top: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>

</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
asdssfasdssfasdssfasdssfasdssf
asdssfasdssfasdssf
asdssfasdssfasdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
<div
style='width: 200px; border: 1px solid red; display: inline-block; vertical-align: top;'>
asdssf
</div>
</div>




Не проще последний блок вложить в первый?)И оставить только рамку сверху чтоб границы не наезжали?)

_____________
Сумашедшим жить легко=)
sign63
Не думаю что размер ширины у Вас будет фиксированный, тогда тот див в диве будет не корректно отображаться, хотя и сам рассматривал этот вариант как наилучший)

_____________
user posted image
logic
нет,
смотри,
если выводить по 4 столбика (каждый столбик по 200пкс) в каждой строчке, и например в первой строчке во втором столбике большой контент, то этот столбик вытянет вниз нижнюю границу первой строчки. А мне надо, чтоб все столбики второй строчки прижались в итоге к столбикам верхней строчки. Друг под другом чтоб были, без промежутков. Поэтому я делал спомощью ДИВов, только по мись никак не получается.
как на картинке стрелками показанноuser posted image
sign63
Если так много дивов то лучше их в таблицу засунуть, если таблицей нельзя то только див в дите, и то когда нибудь он уедет).
В таблице сделать там "4 столбика (каждый столбик по 200пкс) в каждой строчке" и все будет в порядке
=) только думаю надо будет таблице (или диву) указать "min-width: 800px;" в CSS

_____________
user posted image
dron4ik
div - 1 колонка
div
div

div - 2 колонка
div
div

div - 3 колонка
div
div


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

_____________
Ex3m.com.ua — Активный образ жизни
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.