Jump to content
  • 0

Растягивание блока.


Necronomicron
 Share

Question

Есть три блока (div) с display: inline-block, левый и правый нефиксированной ширины (выравниваются по их содержимому), а средний должен растягиваться от левого до правого блока. Если ставить width: 100%, то блок растягивается вообще на всю страницу, выталкивая при этом блоки вверх и вниз, width: auto ничего не делает. Можно, и даже лучше было бы сделать эти блоки float (чтобы не было отступов между блоками), но опять же всё выталкивается при width: 100%.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Сложно представить, зачем такое поведение нужно, но с инлайн-блоками вам ничего не светит.

Либо это не будет работать, либо получится абсурдная комбинация с min-width, max-width и неразрывными пробелами, т.к. инлайн-блоки — это всё-таки элементы строчного уровня.

Больше всего под описание задачи подходит таблица или структура div.pseudo_table > .pseudo_cell * 3, где

.pseudo_table { display:table; }

.pseudo_cell { display:cell; }

Но лучше всё-таки кондовая таблица.

Link to comment
Share on other sites

  • 0

Сложно представить, зачем такое поведение нужно, но с инлайн-блоками вам ничего не светит.

Либо это не будет работать, либо получится абсурдная комбинация с min-width, max-width и неразрывными пробелами, т.к. инлайн-блоки — это всё-таки элементы строчного уровня.

Больше всего под описание задачи подходит таблица или структура div.pseudo_table > .pseudo_cell * 3, где

.pseudo_table { display:table; }

.pseudo_cell { display:cell; }

Но лучше всё-таки кондовая таблица.

В общем я сделал крайние блоки фиксированной ширины, может и так хорошо будет. Делаю для себя в любом случае.

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