Div по размеру содержимого: веб программирование — Как сделать ширину div по содержимому?

Leave a Comment / Разное / By alexxlab / 04.07.2023

Содержание

Как сделать, чтобы ширина 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;

Ответ написан более трёх лет назад

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

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

Ответ написан более трёх лет назад

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

box-sizing | htmlbook.ru

Internet Explorer	Chrome		Opera	Safari		Firefox	Android		iOS
8.0+	4.0+	10.0+	7.0+	3.1+	5.0+	1.0+	2.1+	4.0+	3.2+	5.0+

Краткая информация

Значение по умолчанию	content-box
Наследуется	Нет
Применяется	Ко всем элементам
Процентная запись	Неприменима
Ссылка на спецификацию	http://www.w3.org/TR/css3-ui/#box-sizing

Версии CSS

CSS 1	CSS 2	CSS 2. 1	CSS 3

Описание

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

content-box: Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box: Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
padding-box: Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).
inherit: Наследует значение родителя.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
   .box1 { 
    background: #f0f0f0; /* Цвет фона */
    width: 300px; /* Ширина блока */
    padding: 10px; /* Поля */
    border: 2px solid #000; /* Параметры рамки */
   }
   .box2 { 
    background: #fc0; /* Цвет фона */
    width: 300px; /* Ширина блока */
    padding: 10px; /* Поля */
    margin-top: 10px; /* Отступ сверху */
    border: 2px solid #000; /* Параметры рамки */
    -moz-box-sizing: border-box; /* Для Firefox */  
    box-sizing: border-box; /* Ширина блока с полями */
   }
  </style>
 </head>
 <body> 
  <div>Ширина с учетом значения свойства width, полей и границ.</div>
  <div>Ширина равна значению свойства width.</div>
 </body>
</html>

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing. Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Ширина блоков

Браузеры

Firefox поддерживает нестандартное свойство -moz-box-sizing.

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing.

Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box.

Размеры

CSS по теме

box-sizing

Статьи по теме

DIV-ные колонки одинаковой высоты на CSS
Блочная модель
Использование box-sizing
Ширина блока

Статьи по теме

Рецепты CSS

fit-content() — CSS: каскадные таблицы стилей

Базовая линия: широко поддерживается max(минимальный размер, аргумент))

.

Функцию можно использовать в качестве размера дорожки в свойствах CSS Grid, где максимальный размер определяется max-content , а минимальный размер — auto , который рассчитывается аналогично auto (т.

е. minmax(auto, max-content) ), за исключением того, что размер дорожки ограничивается аргументом , если он больше минимума auto .

См. страницу grid-template-columns для получения дополнительной информации о ключевых словах max-content и auto .

Функцию fit-content() также можно использовать в качестве размера выложенного блока для ширины , высоты , min-width , min-height , max-width и max-height , где максимальный и минимальный размеры относятся к размеру содержимого.

Функция fit-content() принимает в качестве аргумента или .

 /* <длина> значений */
подходящий контент (200px)
подходит-содержание (5 см)
фит-контент(30vw)
фит-контент(100ч)
/* <процентное>   значение */
фит-контент(40%)

Значения

<длина>

Абсолютная длина.

<процент>

Процент доступного места на данной оси.

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

Изменение размера столбцов сетки с помощью fit-content

HTML

 
  Ширина элемента равна содержанию.
  <дел>
    Элемент с большим количеством текста. Поскольку его содержимое шире, чем
    максимальная ширина ограничивается 300 пикселями.
  
  Гибкий элемент

CSS


  #контейнер {
  отображение: сетка;
  столбцы шаблона сетки: подходящее содержимое (300 пикселей) подходящее содержимое (300 пикселей) 1fr;
  зазор сетки: 5px;
  box-sizing: граница-коробка;
  высота: 200 пикселей;
  ширина: 100%;
  цвет фона: #8cffa0;
  отступ: 10 пикселей;
}
#контейнер > div {
  цвет фона: #8ca0ff;
  отступ: 5px;
}

Результат

90 099

Спецификация
Модуль определения размеров коробки Уровень 4 # значения размеров CSS

css.

properties.grid-template-columns.fit-content

Таблицы BCD загружать только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

css.properties.width.fit-content_function

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

Ключевые слова, связанные с размером: min-content , max-content
Связанные свойства сетки CSS: grid-template , grid-template-rows , grid-template-columns , grid-template-areas , grid-auto-columns , grid -автостроки , сетка-автопоток
Руководство по компоновке сетки: Размещение на основе линий с помощью CSS Grid
Руководство по компоновке сетки: Области шаблона сетки — сокращенные определения определения сетки

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 22 февраля 2023 г. участниками MDN.

Вписать содержимое в div — HTML и CSS — Форумы SitePoint

marklenon95 29 сентября 2017 г., 9:22 1

Привет всем,

Я создаю веб-сайт с фиксированным фоновым изображением с шириной и высотой, установленными на 100%, у меня есть одна проблема, когда контент выходит на 100%, он перемещается на следующий div. Как исправить содержимое div, чтобы оно оставалось внутри div и увеличивало высоту этого div, но изображение оставалось фиксированным?

https://codepen. io/lenon95x/pen/yzXaaG

Это просто пример, на моем сайте я использую flexbox для позиционирования элементов.

СамА74

29 сентября 2017 г., 9:29 2

Фиксированная высота редко является хорошей идеей в RWD, если вы хотите установить высоту, обычно лучше использовать min-height , а не просто height , так же как лучше использовать max-width вместо ширина .
Изменение высоты на минимальную высоту позволяет содержать текст.

1 Нравится

29 сентября 2017 г., 9:36 3

У меня сейчас проблема, что содержимое вырезается. Я использую flex-box для позиционирования своих элементов.

СамА74 29 сентября 2017 г., 9:39 4

маркленон95:

У меня теперь проблема, что содержимое вырезается.

Я не совсем понимаю, что вы имеете в виду. Не могли бы вы объяснить дальше?

1 Нравится

29 сентября 2017 г., 9:46 5

Первый div содержит элементы списка, когда я изменяю размер окна, содержимое окна, которое не помещается в div, скрывается, когда я использую overflow: auto; div получает полосу прокрутки. Я использовал min-height , как вы сказали. Я использую flexbox для позиционирования элементов.

367×554 243 КБ

При необходимости могу поделиться кодом в личном сообщении.

СамА74 29 сентября 2017 г., 9:52 6

маркленон95:

При необходимости могу поделиться кодом в личном сообщении.

Почему нельзя разместить код здесь или в Codepen?

маркленон95:

Я использую flexbox для позиционирования элементов.

Я не уверен, какую роль флексбокс будет играть в этом макете, возможно, вы слишком все усложняете.

1 Нравится

ПолОБ 30 сентября 2017 г., 8:59 7

маркленон95:

Первый div содержит элементы списка, когда я изменяю размер окна, содержимое окна, которое не помещается в div, скрывается, когда я использую overflow: auto; div получает полосу прокрутки.

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