7

Здравствуйте, уважаемые знатоки верстки! Подскажите плиз кроссбраузерное решение задания ширины div по содержимому дочерних элементов. Т.е. имеется, например

<div id="l0_b1" style="display: block">
    <span id="l1_s1">тут контент с неизвестной шириной</span>
</div>

Как установить ширину l0_b1 == ширине l1_s1?

ПС. Очень желательно без js-хаков.

1
  • @Invis1ble2, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). 29 окт 2014 в 14:10

5 ответов 5

13

Как уже было сказано либо inline-block либо inline, если div-ву нужны блочные свойства,то display: inline-block;, но в этом случае необходимо задавать еще vertical-align: top; что-бы блок не съезжал вниз при добавлении контента. А вообще сами можете потренироваться, почти в каждом браузере есть отладчик для разработчиков, в FireFox пишите атрибут и по очереди прокликиваете все значения, этот вариант просто незаменим для новичков, можно наглядно всё увидеть, как элементы ведут себя.

1
  • спасибо за советы, буду пробовать дело в том, что я действительно новичек в верстке
    – Invis1ble
    25 июл 2011 в 20:00
9

Эту задачу можно решить несколькими способами:

1 - С помощью display: inline-block;:

#l0_b1 {
  display: inline-block;
  border: 1px solid purple;
}
<div id="l0_b1">
  <span id="l1_s1">тут контент с неизвестной шириной</span>
</div>


2 - С помощью display: block;:

#l0_b1 {
  display: block;
  float: left;
  border: 1px solid purple;
}
<div id="l0_b1">
  <span id="l1_s1">тут контент с неизвестной шириной</span>
</div>

Используя float, не забывайте про clear: both


3 - С помощью display: inline-flex;:

#l0_b1 {
  display: inline-flex;
  border: 1px solid purple;
}
<div id="l0_b1">
  <span id="l1_s1">тут контент с неизвестной шириной</span>
</div>


4 - С помощью display: table;:

#l0_b1 {
  display: table;
  border: 1px solid purple;
}
<div id="l0_b1">
  <span id="l1_s1">тут контент с неизвестной шириной</span>
</div>


И блоки, и флексы, и таблицы могут оборачивать блок по его ширине. В зависимости от вашей общей задачи, вы можете выбрать самый подходящий вам вариант.

1
  • 2
    Не думал, что когда-то мне это пригодится😂👍 Впрочем благодарен)
    – Arthur
    3 окт 2018 в 17:19
5
width: fit-content; 

Правда с поддержкой там пока не очень все радостно.

1
  • Это свойство НЕ поддерживается только IE и Edge. Остальные браузеры адекватно воспринимают. Кстати спасибо, помогло 11 сен 2019 в 14:19
2

Самый простой способ задать диву float:left/right (если это допустимо для позиционирования) или display:inline, тогда его размер будет полностью зависеть от содержимого. (Добавьте больше информации, что должно получаться)

4
  • display: inline не подходит, а вот float: left - вроде оно. возможно ли теперь отцентровать блок по горизонтали?
    – Invis1ble
    25 июл 2011 в 19:45
  • Старенький хак: <center><div>text</div></center>
    – trec
    25 июл 2011 в 19:50
  • Почитайте xiper.net/collect/html-and-css-tricks/pozitsionirovanie/… может поможет.
    – makregistr
    25 июл 2011 в 19:59
  • Не думаю что это правильно решение, потому как выравнивание не всегда удобно. <img src="/vote/19946/up/" width="1px"/>
    – org
    25 июл 2011 в 20:31
1

Клевое решение float. Выровнять

clear:both;
1
  • Огромное спасибо за "Clear:both;"!
    – user24569
    29 окт 2014 в 8:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.