У меня есть макет, похожий на:
<div>
<table>
</table>
</div>
Я хотел бы, чтобы div
расширялся до ширины, чем мой table
.
У меня есть макет, похожий на:
<div>
<table>
</table>
</div>
Я хотел бы, чтобы div
расширялся до ширины, чем мой table
.
Решение состоит в том, чтобы установить div
на display: inline-block
.
Вы хотите, чтобы элемент блока имел то, что CSS называет сжатой шириной, и спецификация не обеспечивает благословенный способ получить такую вещь. В CSS2 сжимаемость до соответствия не является целью, но означает иметь дело с ситуацией, когда браузеру "приходится" получать ширину из воздуха. Эти ситуации:
если ширина не указана. Я слышал, что они думают добавить то, что вы хотите в CSS3. Пока что сделайте это с одним из вышеперечисленных.
Решение не раскрывать эту функцию напрямую может показаться странным, но есть веская причина. Это дорого. Сокращение до места означает форматирование по крайней мере в два раза: вы не можете начать форматирование элемента до тех пор, пока не узнаете его ширину, и вы не сможете рассчитать ширину без прохождения всего содержимого. Кроме того, человеку не нужно убираться в нужное положение так часто, как можно подумать. Зачем вам нужен дополнительный div вокруг вашего стола? Возможно, подпись в таблице - это все, что вам нужно.
Я думаю, используя
display: inline-block;
будет работать, однако я не уверен в совместимости с браузером.
Другим решением будет обернуть ваш div
в другой div
(если вы хотите поддерживать поведение блока):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS
.yourdiv
{
display: inline;
}
display: inline-block
добавляет дополнительное поле к вашему элементу.
Я бы порекомендовал это:
#element {
display: table; /* IE8+ and all other modern browsers */
}
Бонус: теперь вы также можете легко #element
этот новый #element
просто добавив margin: 0 auto
.
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
Foo Hack - Поддержка Cross Browser для встроенного блочного стиля (2007-11-19).
Что для меня работает:
display: table;
в div
. (Протестировано в Firefox и Google Chrome).
Вы можете попробовать fit-content
(CSS3):
div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
Есть два лучших решения
display: inline-block;
ИЛИ ЖЕ
display: table;
Из этих двух display:table;
лучше, потому что display: inline-block;
добавляет дополнительный запас
Для display:inline-block;
Вы можете использовать метод отрицательного поля, чтобы исправить лишнее пространство
Ответ на ваш вопрос лежит в будущем, мой друг...
а именно "intrinsic" приходит с последним обновлением CSS3
width: intrinsic;
К сожалению, IE отстает от него, так что он еще не поддерживает его
Подробнее об этом: CSS Внутренний и внешний размерный модуль уровня 3 и Могу ли я использовать?: Внутренний и внешний размер.
Теперь вы должны быть удовлетворены <span>
или <div>
, установленными в
display: inline-block;
Не знаю, в каком контексте это будет отображаться, но я верю, что свойство CSS стиля float
либо left
, либо right
будет иметь этот эффект. С другой стороны, он будет иметь и другие побочные эффекты, такие как возможность размещения текста вокруг него.
Пожалуйста, поправьте меня, если я ошибаюсь, хотя я не уверен на 100%, и в настоящее время я не могу проверить его сам.
Решение, совместимое с CSS2, должно использовать:
.my-div
{
min-width: 100px;
}
Вы также можете плавать свой div, который заставит его как можно меньше, но вам нужно будет использовать clearfix, если что-либо внутри вашего div плавает:
.my-div
{
float: left;
}
width:1px;
white-space: nowrap;
отлично работает для меня:)
ОК, во многих случаях вам даже не нужно ничего делать, поскольку по умолчанию div имеет height
и width
как автоматический, но если это не ваш случай, применяя inline-block
дисплей будет работать для вас... посмотрите на код, который я создаю для вас, и он делает то, что вы ищете:
div {
display: inline-block;
}
<div>
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
<td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
</tr>
</table>
</div>
Вы можете сделать это, просто используя display: inline;
(или white-space: nowrap;
).
Надеюсь, вы сочтете это полезным.
Это было упомянуто в комментариях и трудно найти в одном из ответов так:
Если по какой-либо причине вы используете display: flex
, вместо этого вы можете использовать:
div {
display: inline-flex;
}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div id="content_lalala">
this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
</div>
</td>
</tr>
</table>
Я знаю, что людям иногда не нравятся таблицы, но я должен сказать вам, что я попробовал встроенные хаки css, и они вроде работали в некоторых div, но в других это не так, так что было действительно легче заключить расширяющийся div в таблица... и... она может иметь или не иметь встроенного свойства, и все же таблица - это та, которая будет содержать общую ширину содержимого. знак равно
Вы можете использовать inline-block
как @user473598, но остерегайтесь старых браузеров.
/* Your're working with */
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;
Mozilla не поддерживает встроенный блок вообще, но у них есть -moz-inline-stack
который примерно такой же
Некоторый кросс-браузер вокруг атрибута отображения inline-block
: https://css-tricks.com/snippets/css/cross-browser-inline-block/
Вы можете увидеть некоторые тесты с этим атрибутом в: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Просто поместите стиль в свой файл CSS
div {
width: fit-content;
}
Здесь находится рабочая демонстрация -
.floating-box {
display:-moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
<h2>The Way is using inline-block</h2>
Supporting elements are also added in CSS.
<div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>
My CSS3 flexbox решение в двух вариантах: один сверху ведет себя как span, а нижний ведет себя как div, беря всю ширину с помощью обертки. Их классы - "верх", "нижний" и "нижний" соответственно.
body {
font-family: sans-serif;
}
.top {
display: -webkit-inline-flex;
display: inline-flex;
}
.top, .bottom {
background-color: #3F3;
border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
display: -webkit-flex;
display: flex;
}
table {
border-collapse: collapse;
}
table, th, td {
width: 280px;
border: 1px solid #666;
}
th {
background-color: #282;
color: #FFF;
}
td {
color: #444;
}
th, td {
padding: 0 4px 0 4px;
}
Is this
<div class="top">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
<div class="bottom">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
</div>
this is what you are looking for.
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
Это сделает родительскую ширину div той же самой, что и наибольшая ширина элемента.
Попробуйте display: inline-block;
. Чтобы он был совместим с браузером, используйте приведенный ниже код css.
div {
display: inline-block;
display:-moz-inline-stack;
zoom:1;
*display:inline;
border-style: solid;
border-color: #0000ff;
}
<div>
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
</table>
</div>
Нанесение ущерба с помощью Firebug Я нашел значение свойства -moz-fit-content
, которое точно делает то, что требуется OP и может использоваться следующим образом:
width: -moz-fit-content;
Хотя он работает только в Firefox, я не смог найти эквивалент для других браузеров, таких как Chrome.
Я решил аналогичную проблему (где я не хотел использовать display: inline-block
, потому что элемент был центрирован), добавив тег span
внутри тега div
и перемещая форматирование CSS из внешнего div
в новый внутренний тег span
. Просто выбросьте это в качестве другой альтернативной идеи, если display: inline block
не подходит для вас.
Мы можем использовать любой из двух способов в элементе div
:
display: table;
или,
display: inline-block;
Я предпочитаю использовать display: table;
, потому что он обрабатывает все лишние пробелы сам по себе. В то время как для display: inline-block
требуется дополнительное пространство.
div{
width:auto;
height:auto;
}
Исправлено (работает, если у вас несколько детей): вы можете использовать jQuery (смотрите ссылку JSFiddle)
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});
Не забудьте включить jQuery...
Если у вас есть контейнеры, ломающие линии, после нескольких часов поиска хорошего решения для CSS и поиска его, теперь я использую jQuery вместо:
$('button').click(function(){
$('nav ul').each(function(){
$parent = $(this).parent();
$parent.width( $(this).width() );
});
});
nav {
display: inline-block;
text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
display: inline;
}
/* needed style */
ul {
padding: 0;
}
body {
width: 420px;
}
/* just style */
body {
background: #ddd;
margin: 1em auto;
}
button {
display: block;
}
nav {
background: #bbb;
margin: 1rem auto;
padding: 0.5rem;
}
li {
display: inline-block;
width: 40px;
height: 20px;
border: solid thin #777;
margin: 4px;
background: #999;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>fix</button>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
</ul>
</nav>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
<li>1</li>
<li>5</li>
<li>9</li>
<li>2</li>
<li>6</li>
<li>5</li>
<li>3</li>
<li>5</li>
</ul>
</nav>
Я пробовал div.classname{display:table-cell;}
, и он сработает!
Я бы просто установил padding: -whateverYouWantpx;