Ширина div по контенту

#html #css

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

    тут контент с неизвестной шириной


Как установить ширину l0_b1 == ширине l1_s1?
ПС. Очень желательно без js-хаков.    

Ответы

Ответ 1

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


Ответ 2

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

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



#l0_b1 {
  display: inline-block;
  border: 1px solid purple;
}

  тут контент с неизвестной шириной







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


#l0_b1 {
  display: block;
  float: left;
  border: 1px solid purple;
}

  тут контент с неизвестной шириной





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



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



#l0_b1 {
  display: inline-flex;
  border: 1px solid purple;
}

  тут контент с неизвестной шириной







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


#l0_b1 {
  display: table;
  border: 1px solid purple;
}

  тут контент с неизвестной шириной







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


Ответ 3

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


Ответ 4

width: fit-content; 


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


Ответ 5

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