div를 내용보다 크지 않게 만들려면 어떻게해야합니까?

비슷한 레이아웃이 있습니다.

<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추가하는 것만으로도 멋진 새로운 중심을 쉽게 맞출 수 있습니다 margin: 0 auto.

시도 할 수 있습니다 fit-content(CSS3) :

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}

• 브라우저 지원
• 사양

나를 위해 일하는 것은 :

display: table;

에서 div. ( Firefox 및 Chrome 에서 테스트 )

두 가지 더 나은 솔루션이 있습니다

1. display: inline-block;

   또는

2. display: table;

이 두 가지 중 display:table; , 더 있기 때문에 display: inline-block;추가 마진을 추가합니다.

들어 display:inline-block;당신은 여분의 공간을 해결하기 위해 부정적인 여백 방법을 사용할 수 있습니다

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack – 인라인 블록 스타일링을위한 크로스 브라우저 지원 (2007-11-19) .

어떤 컨텍스트에서 이것이 나타날지 알지 못하지만 CSS 스타일 속성 float중 하나 left또는 right이 효과가 있다고 생각합니다 . 반면에 텍스트가 떠 다니는 것과 같은 다른 부작용도 있습니다.

그래도 틀렸다면 수정하십시오 .100 % 확실하지 않으며 현재 직접 테스트 할 수 없습니다.

귀하의 질문에 대한 답변은 미래에 내 친구에게 있습니다 ...

즉 "intrinsic"은 최신 CSS3 업데이트와 함께 제공됩니다

width: intrinsic;

불행히도 IE 는 뒤에 있기 때문에 아직 지원하지 않습니다.

더 그것에 대해 : CSS 내장 및 외부 크기 조정 모듈 레벨 3 과 수 있습니까 사용? : 내재 및 외재 사이징 .

지금은 만족 <span>하거나로 <div>설정해야합니다

display: inline-block;

CSS2 호환 솔루션은 다음을 사용합니다.

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

div를 플로팅하여 가능한 한 작게 만들 수 있지만 div 내부에 무언가가 떠있는 경우 clearfix 를 사용해야합니다 .

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

나를 위해 잘 작동합니다 :)

OK, 많은 경우에 당신도이 기본 사업부로 같은 작업을 수행 할 필요가 없습니다 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: flex어떤 이유로 든 사용 하는 경우 대신 다음을 사용할 수 있습니다.

div {
    display: inline-flex;
}

또한 브라우저에서 광범위하게 지원됩니다.

display: inline;(또는 white-space: nowrap;) 를 사용하여 간단하게 수행 할 수 있습니다 .

이 정보가 도움이 되길 바랍니다.

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; 
}

<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에서는 그렇지 않았으므로 확장 div를 묶는 것이 더 쉬웠습니다. 테이블 ... 그리고 ... 인라인 속성을 가질 수 있거나 가질 수 없으며 여전히 테이블은 내용의 전체 너비를 보유 할 테이블입니다. =)

실습 데모는 여기

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

두 가지 맛의 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.

<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과 같은 다른 브라우저에서는 해당 기능을 찾을 수 없습니다.

이 코드를 사용해보십시오. CSS 섹션의 코드를 따르십시오.

div {
  display: inline-block;
  padding: 2vw;
  background-color: green;
}

table {
  width: 70vw;
  background-color: white;
}

<div>
    <table border="colapsed">
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>

    </table>
</div>

태그 안에 태그 display: inline-block를 추가 하고 CSS 형식을 외부 태그에서 새로운 내부 태그로 이동하여 비슷한 문제 ( 항목이 중앙에 있었기 때문에 사용하고 싶지 않은 곳)를 해결했습니다 . 당신에게 적합한 대답이 아니라면 다른 대안 아이디어로 이것을 버립니다 .spandivdivspandisplay: inline block

div요소 에서 두 가지 방법 중 하나를 사용할 수 있습니다 .

display: table;

또는,

display: inline-block; 

나는 display: table;모든 여분의 공간을 자체적으로 처리하기 때문에을 사용하는 것을 선호합니다 . 하지만 display: inline-block일부 여분의 공간 고정이 필요합니다.

div{
  width:auto;
  height:auto;
}

컨테이너가 줄을 끊고 몇 시간 후에 좋은 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>

개정 (자식이 여러 개인 경우 작동) : jQuery를 사용할 수 있습니다 (JSFiddle 링크를보십시오)

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

jQuery를 포함시키는 것을 잊지 마십시오 ...

여기 JSfiddle을보십시오

나는 노력 div.classname{display:table-cell;}했고 효과가 있었다!