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

Вопрос задан

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

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

Здравствуйте, уважаемые знатоки верстки! Подскажите плиз кроссбраузерное решение задания ширины 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;

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

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

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

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

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

Как установить ширину div в соответствии с содержимым с помощью CSS?

Улучшить статью

Сохранить статью

Нравится Статья

aditya_taparia

ученый

204 опубликованных статьи

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Нравится Статья

    Существует три способа решения этой проблемы, которые перечислены ниже:

    1. По умолчанию
    2. Использование свойства встроенного блока
    3. Использование свойства fit-content по ширине и высоте

    Вариант по умолчанию: Раздел HTML по умолчанию соответствует содержимому внутри него. Пример выглядит так:

    Пример 1:  

    html

    9 0051 < html lang = "en" dir = "ltr">

          

    < головка >

         < мета кодировка = "utf-8">

         < 90 052 title >Пример GeeksforGeeks title >

          

        

         < стиль media = "экран">

             9005 2 корпус {

                 фон: оранжевый;

                 переполнение: скрыто;

                 цвет: белый;

             }

             . GeeksForGeeks {

    9 0051                  text-align: center;

                 фон: сине-голубой;

                 позиция: абсолютная;

                 верх: 50%;

                 осталось: 1%;

                 справа: 1%;

             }

         стиль >

    головка >

     

    < корпус >

          

        

         < h2 style = "color:forestgreen; top:35 %;

                 осталось: 35%; позиция:абсолютная; ">

    Компьютерщики Для Компьютерщиков

         h2 >

     

         < div class = "GeeksForGeeks">

             Каскадные таблицы стилей, с любовью называемые

             как CSS, это просто разработанный язык

    9 0050          предназначен для упрощения процесса

             придания веб-страницам презентабельного вида. CSS позволяет вам применять стили к веб-страницам. Подробнее

             Важно, что CSS позволяет это сделать

             независимо от HTML, который составляет

             каждую веб-страницу.

         раздел >

    тело >

     

    html >

    Вывод:

      

    Использование свойства встроенного блока: Используйте свойство display: inline-block для установки размера div в соответствии с его содержимым.

    Пример 2:  

    html

    < 9 0052 html lang="en">

     

    < голова >

         < мета кодировка = "utf-8">

          

         < title >Пример GeeksforGeeks title >

          

        

         < стиль media = "экран">

             тело {

                 фон: фиолетовый;

                 переполнение: авто;

                 цвет: белый;

             }

             . GeeksForGeeks {

    9 0051                  text-align: center;

                 фон: сине-голубой;

                 позиция: абсолютная;

                 дисплей: встроенный блок;

                 осталось: 1%;

                 справа: 1%;

                 верх: 50%;

             }

         стиль >

    головка >

     

    < корпус >

         < h2 style="color: forestgreen;

             вверху: 35%; слева: 35%; position : absolute;">

             Компьютерщики для компьютерщиков

         h2 >

     

         < 9 0051 div     class="GeeksForGeeks">

             Каскадные таблицы стилей, ласково называемые

             , представляют собой просто разработанный язык

             , предназначенный для упрощения процесса 9 0052

             придание веб-страницам презентабельного вида. CSS позволяет вам применять стили к веб-страницам. Подробнее

             важно, что CSS позволяет это сделать

             независимо от HTML, который составляет

             каждую веб-страницу.

         раздел >

    тело >

     

    html >

    Вывод:

      

    Использование свойства fit-content по ширине и высоте: В этом методе мы устанавливаем свойство ширины и высоты в значение, соответствующее содержимому. Пример 3:  

    html

    < html lang = "en" dir = "ltr">

          

    < голова >

         < мета кодировка = "utf-8">

         < title >Гики для гиков Пример title >

         90 052  

        

         < стиль media = "экран" >

             тело {

                 фон: помидор;

                 переполнение: скрыто;

                
    цвет: белый;

             }

             . GeeksForGeeks {

    9 0051                  фон: малиновый;

                 позиция: абсолютная;

                 width:fit-content;

                 height:fit-content;

                 слева: 0;

                 верх: 50%;

             }

         стиль >

    головка >

     

    < корпус >

         < h2 стиль = "цвет: салатовый; верх: 35%;

             осталось: 35%; position: absolute;">

             Geeks For Geeks

         h2 >

             

         < div class = "GeeksForGeeks" >

             Каскадные таблицы стилей, с любовью

             к AS CSS - это просто разработанный язык

    , предназначенный для упрощения процесса

    Создание веб -страниц. CSS позволяет вам применять стили к веб-страницам. Подробнее

             важно, что CSS позволяет вам сделать это

             независимо от HTML, из которого состоит

             каждой веб-страницы.

         раздел >

    тело >

     

    html >

    Вывод:  

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


    Последнее обновление: 10 мая, 2022

    Нравится статья

    Сохранить статью

    css - Размер Div Автоматический размер содержимого

    Задавать вопрос

    спросил

    Изменено 6 месяцев назад

    Просмотрено 230 тысяч раз

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

    Как я могу просто растянуть/изменить ширину в зависимости от длины содержимого? Любая помощь будет принята с благодарностью.

    Насколько я знаю, display: inline-block — это то, что вам, вероятно, нужно. Это будет выглядеть как встроенное, но все же позволит вам использовать такие вещи, как поля и тому подобное.

    5

    Если вы пришли сюда, есть большая вероятность, что width: min-content или width: max-content решит вашу проблему. Это может заставить элемент использовать самое маленькое или самое большое пространство, которое может выбрать браузер…

    Это современное решение. Вот небольшой урок для этого.

    Существует также fit-content , который часто работает как min-content , но является более гибким. (Но также имеет худшую поддержку браузера.

    No related posts.