Как сделать div не больше его содержимого?

Question

У меня есть макет, похожий на:

<div>
    <table>
    </table>
</div>

Я бы хотел, чтобы div расширился до такой же ширины, как мой table.

Answer 1

width:1px;
white-space: nowrap;

у меня отлично работает :) 1002 *

Answer 2

CSS2-совместимым решением является использование:

.my-div
{
    min-width: 100px;
}

Вы также можете использовать свой div как можно меньший, но вам нужно будет использовать clearfix , если что-то внутри вашего div плавает:

.my-div
{
    float: left;
}

Answer 3

ОК, во многих случаях вам даже не нужно ничего делать, так как по умолчанию для 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>

Answer 4

Вы можете сделать это просто с помощью display: inline; (или white-space: nowrap;).

Надеюсь, вы найдете это полезным.

Answer 5

Вы можете использовать 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 / сниппеты / CSS / кросс-браузер встроенный блок /

Вы можете увидеть некоторые тесты с этим атрибутом в: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Answer 6

Это было упомянуто в комментариях, и его трудно найти в одном из ответов, так:

Если по какой-либо причине вы используете display: flex, вы можете вместо этого использовать:

div {
    display: inline-flex;
}

Это также широко поддерживается во всех браузерах.

Answer 7

<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 или нет, и все же таблица будет содержать всю ширину содержимого. =) * * Тысяча два

Answer 8

Просто вставьте стиль в ваш файл CSS

div { 
    width: fit-content; 
}

Answer 9

Рабочее демо здесь-

.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>

Answer 10

Мое CSS3-решение flexbox в двух вариантах: одно сверху ведет себя как промежуток, а другое снизу ведет себя как div, беря всю ширину с помощью оболочки. Их классы "top", "bottom" и "bottomwrapper" соответственно.

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.