Размер блока по содержимому css: html — Ширина div по контенту

Leave a Comment / Css / By /

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

Вопрос задан

Изменён 4 года 4 месяца назад

Просмотрен 160k раз

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

<div>
    <span>тут контент с неизвестной шириной</span>
</div>

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

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

  • html
  • css

1

Как уже было сказано либо inline-block либо inline, если div-ву нужны блочные свойства,то display: inline-block;

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

1

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

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

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

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

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

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

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

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

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

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

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

1 

width: fit-content;

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

1

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

4

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

clear:both;

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как сделать, чтобы ширина div зависела от содержимого? — Хабр Q&A

Как ужé говорилось выше, хороший перенос блочных элементов на новую строку может быть достигнут применением строчного блока.

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

в одном из основных CSS-файловв «Традиции»,

русской энциклопедии:

/*  {{Строчный блок}}
 *  http://habrahabr.ru/blogs/css/96152/
 *  ↑ http://www.smashingmagazine.com/2010/06/10/50-new-useful-css-techniques-tools-and-tutorials/
 *    ↑ http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
 *      ↑ первоисточник
*/
.lineBlock {
   border: 0; margin: 0.3em 0.15em; padding: 0;
 
   display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
   display: inline-block;
   vertical-align: top;
 
   /* ↓ IE6 & IE7 «hasLayout» voodoo */
   zoom: 1;
   *display: inline;
   /* ↑ IE6 & IE7 starhack ← http://www.ejeliot.com/blog/63 */
}

Как видите, этот код составлен по принципам, обеспечивающим обратную совместимость с Firefox 2 и IE 6 и 7.

Если рамка внешнего блока не будет совершенно прилегать ко границам внутренних строчных блоков, тогда непременно попробуйте и внешний блок также оформить в качестве строчного блока, то есть и ему назначить класс «lineBlock», описанный вышеприведённым CSS-кодом.

Ответ написан

попробуйте вместо дива спан со свойством display:inline-block;

Ответ написан

Комментировать

Комментировать

www.artlebedev.ru/tools/technogrette/html/thumbnails-center/

Кажись оно, только у вас даже проще.

Ответ написан

Комментировать

Комментировать

float:left; overflow:hidden;
а для нижних блоков clear:left;

Ответ написан

2010, в 20:57″> более трёх лет назад

Комментировать

Я бы хотел дополнить вопрос https://jsfiddle.net/badgoto/b0z9samx/ , здесь «@@@» не прилегает к тексту, ширина дива ‘content’ больше, чем хотелось бы. word-break: break-all — не подходит по условию задачи.

Ответ написан

Комментировать

Свойство CSS: размер блока | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Свойство CSS: размер блока

  • Глобальное использование
    95,57% + 0% знак равно 95,57%
IE
  1. 16% — Not supported»> 6–10: не поддерживается
  2. 11: не поддерживается
Edge
  1. . Supported
Chrome
  1. 4 — 56: Not supported
  2. 57 — 107: Supported
  3. 108: Supported
  4. 109 — 111: Supported
Safari
  1. 3.1 — 12: Not supported
  2. 12.1 — 16.0: Поддерживается
  3. 16.1: Поддерживается
  4. 16,2 — TP: Поддерживается
Opera
  1. 10 — 43: не поддерживается
  2. 77% — Supported»> 44 — 91: поддержан
  3. 92: Поддержано
    4. 911: 70013
  4. 92: Не поддерживается
  5. 12.2 — 16.0: Поддерживается
  6. 16.1: Поддерживается
Opera Mini
  1. Все: поддержка неизвестна
Brower
  1. 2.1 -4.44: не поддерживает
      1. 2.1 -4.4: не поддерживает
          1. 2,1 -4.0014
          Opera Mobile
          1. 12 — 12.1: Not supported
          2. 72: Supported
          Chrome for Android
          1. 107: Supported
          Firefox for Android
          1. 29% — Supported»> 106: Supported
          UC Browser for Android
          1. 13.4: поддержка неизвестна.0013
            1. 13.1: поддержка неизвестна
            Baidu Browser
            1. 13.18: Поддержка неизвестна
            KAIOS Browser
            1. 2,5: поддержка Университета
              1. 2,5: поддержка Университета
                1. 2,5: Поддержка.

                  Пример

                  HTML-контент

                  HTML

                  Копировать код

                  Пример текста

                  CSS-контент

                  CSS

                  Код копии

                  . exampleText {
  режим письма: вертикальный-rl;
  цвет фона: желтый;
  размер блока: 200 пикселей;
}

                  Синтаксис  

                  CSS

                  Код копии

                  /* значения <длины> */
размер блока: 300px;
размер блока: 25em;

/* <процент> значений */
размер блока: 75%;

/* Значения ключевых слов */
размер блока: рамка 25em;
размер блока: 75% поле содержимого;
размер блока: максимальное содержание;
размер блока: мин-контент;
размер блока: доступен;
размер блока: подходящий контент;
размер блока: авто;

/* Глобальные значения */
размер блока: наследовать;
размер блока: начальный;
размер блока: не установлен;

                  Значения

                  Свойство размера блока принимает те же значения, что и свойства ширина и высота .

                  Формальный синтаксис

                  CSS

                  Код копии

                  <'ширина'>

                  Описание  

                  CSS-свойство block-size определяет горизонтальный или вертикальный размер блока элемента в зависимости от его режима записи.

                  Это соответствует свойству width или height в зависимости от значения, определенного для write-mode .

                  Если режим письма ориентирован вертикально, значение размера блока относится к ширине элемента, в противном случае оно относится к высоте элемента. относится к встроенный размер , который определяет другой размер элемента.

                  Initial value auto
                  Applies to same as width and height
                  Inherited no
                  Percentages block-size of containing block
                  Носитель визуальный
                  Расчетное значение то же, что и ширина и высота
                  Анимация нет
                  Канонический порядок уникальный однозначный порядок, определяемый формальной грамматикой 4 4

                  Совместимость с браузером  

                  • Настольный
                  • Мобильный

                  Особенность Хром Firefox (Геккон) Internet Explorer 902:30 Опера Сафари (веб-кит)
                  Базовая опора Нет поддержки 41,0 (41,0) [1] Нет поддержки Нет поддержки Нет поддержки

                  Особенность Андроид Firefox Mobile (Геккон) Интернет-телефон Опера Мобайл Сафари Мобильный
                  Базовая опора Нет поддержки 41,0 (41,0) [1] Нет поддержки Нет поддержки Нет поддержки

                  [1] Доступно, начиная с Gecko 38, но за параметром layout.

                  Добавить комментарий

                  Ваш адрес email не будет опубликован. Обязательные поля помечены *