Ширина div по контенту
Как уже было сказано либо inline-block либо inline, если div-ву нужны блочные свойства,то display: inline-block; , но в этом случае необходимо задавать еще vertical-align: top; что-бы блок не съезжал вниз при добавлении контента. А вообще сами можете потренироваться, почти в каждом браузере есть отладчик для разработчиков, в FireFox пишите атрибут и по очереди прокликиваете все значения, этот вариант просто незаменим для новичков, можно наглядно всё увидеть, как элементы ведут себя.
Эту задачу можно решить несколькими способами:
1 — С помощью display: inline-block; :
2 — С помощью display: block; :
Используя float , не забывайте про clear: both
3 — С помощью display: inline-flex; :
4 — С помощью display: table; :
И блоки, и флексы, и таблицы могут оборачивать блок по его ширине. В зависимости от вашей общей задачи, вы можете выбрать самый подходящий вам вариант.
Как сделать, чтобы ширина div зависела от содержимого?
Пробовал float: left, но в данном случае это работает только в IE и Opera.
Как есть 
Как хотелось бы — работает в IE и Opera с float: left 
При размещении изображений если оно не помещается, то переносится на следующую строку, при этом в том месте, где изображение не поместилось образовывается пустота, блок остаётся растянутым на всю ширину.
- Вопрос задан более трёх лет назад
- 115739 просмотров
- Вконтакте
Как ужé говорилось выше, хороший перенос блочных элементов на новую строку может быть достигнут применением строчного блока. Рекомендую для этой цели использовать нижеследующий код строчного блока, вполне испытанный многомесячным применением его в одном из основных русской энциклопедии:
Как видите, этот код составлен по принципам, обеспечивающим обратную совместимость с Firefox 2 и IE 6 и 7.
Если рамка внешнего блока не будет совершенно прилегать ко границам внутренних строчных блоков, тогда непременно попробуйте и внешний блок также оформить в качестве строчного блока, то есть и ему назначить класс «lineBlock», описанный вышеприведённым
Как сделать ширину блока по содержимому css
С выходом стандарта CSS 3 добавлено свойство box-sizing
, оно позволяет изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.
Рис.100 Пример вычисления ширины и высоты элементов.
Рис. 101 Пример вычисления ширины и высоты элементов в процентах.
- Первый – брать в руки калькулятор и высчитывать проценты, которые стали занимать элементы в нашем документе.
- Второй – использовать альтернативную модель вычисления ширины и высоты элементов.
Мы использовали CSS свойство box-sizing со значением border-box , что позволило нам изменить модель вычисления ширины и высоты элементов.
Рис.102 Пример использования свойства box-sizing.
Значение content-box свойства box-sizing является значением по умолчанию и производит расчёт общей ширины и высоты элемента по классической схеме. На примере ширины:
Рис. 103 Пример изменения модели вычисления ширины и высоты элементов (свойство box-sizing).
| Значение | Описание |
|---|---|
| visible | Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию. |
| hidden | Переполнение обрезается (контент, который выходит за размеры будет невидимым). |
| scroll | Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров. |
| auto | Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров. |
- Первый блок (значение visible ) – содержимое выходит за границы элемента (значение по умолчанию).
- Второй блок (значение hidden ) – содержимое, которое переполняет элемент обрезается.
- Третий блок (значение scroll ) – переполнение обрезается, но добавляется полоса прокрутки.
- Четвертый блок (значение auto ) – как и при значении scroll , только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x — горизонтальной, либо y — вертикальной), а не отображается на странице постоянно.
Рис. 104 Пример управления переполнением элемента.
В данном примере мы использовали элемент <pre>, который сохраняет все пробелы и переносы строк (текст может выходить из отведённой области), что нам и помогло продемонстрировать возможности свойства overflow-x. В нашем случае текст вышел за пределы ширины размера элемента <pre> и браузер добавил горизонтальный бегунок прокрутки, что нам и требовалось.
Рис. 105 Пример управления переполнением элемента по горизонтальной оси.
box-sizing
The box-sizing CSS property sets how the total width and height of an element is calculated.
Try it
By default in the CSS box model, the width and height you assign to an element is applied only to the element’s content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that’s rendered on the screen. This means that when you set width and height , you have to adjust the value you give to allow for any border or padding that may be added. For example, if you have four boxes with width: 25%; , if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container.
The box-sizing property can be used to adjust this behavior:
- content-box gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
- border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. box-sizing: border-box is the default styling that browsers use for the <table> , <select> , and <button> elements, and for <input> elements whose type is radio , checkbox , reset , button , submit , color , or search .
Note: It is often useful to set box-sizing to border-box to lay out elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using position: relative or position: absolute , use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.
Syntax
The box-sizing property is specified as a single keyword chosen from the list of values below.
Values
This is the initial and default value as specified by the CSS standard. The width and height properties include the content, but does not include the padding, border, or margin. For example, .box
Here, the dimensions of the element are calculated as: width = width of the content, and height = height of the content. (Borders and padding are not included in the calculation.)
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box
Here the dimensions of the element are calculated as: width = border + padding + width of the content, and height = border + padding + height of the content.
Formal definition
| Initial value | content-box |
|---|---|
| Applies to | all elements that accept width or height |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
Examples
Box sizes with content-box and border-box
This example shows how different box-sizing values alter the rendered size of two otherwise identical elements.