Jump to content
  • 0

Поведение блока в зависимости от другого


Digidie
 Share

Question

Приветствую! Нужна помощь. Нужно сделать так, чтобы содержимое одного блока центрировалось по вертикали в зависимости от другого. Наглядно должно быть так:

s_1350371823_9357306_8c8157bdf3.png

То есть нужно как то сделать так, чтобы содержимое блоков 1 и 3 всегда вертикально центрировалось в зависимости от содержимого блока 2. Такое в принципе можно реализовать на таблицах, но увы, нужно это как то сделать на дивах. Подскажите пожалуйста как такое реализовать. Может есть скриптик JS какой. Заранее спасибо!

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Ну вы раз уж пишите, пишите что сначала display: table-cell, а потом vertical-align:middle если это так :) И потом, насколько я помню vertical-align указывается при фиксированной высоте, а мне нужно чтобы она тянулась) Поправьте ежели что не так говорю.

Link to comment
Share on other sites

  • 0

Это я наверное пыталась давать удочку, а не рыбку, ну да ладно


<div style="display:table">
<div style="display:table-cell;vertical-align:middle;">первая колонка</div>
<div style="display:table-cell;vertical-align:middle;">вторая колонка</div>
<div style="display:table-cell;vertical-align:middle;">третья колонка</div>
</div>

При указании display:table-cell; див ведёт себя как ячейка таблицы, так что высоту задавать не нужно.

В ИЕ 6-7 не сработает, если нужна поддержка этих браузеров, то нужно с эмуляцией заморачиваться.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy