내용보다 크지 않은 div를 어떻게 만들 수 있습니까?

질문자 :George Snider

다음과 유사한 레이아웃이 있습니다.

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

div 가 내 table 만큼만 확장되기를 바랍니다.

div 를 display: inline-block 으로 설정하는 것입니다.

user473598

CSS가 너비에 맞게 축소(shrink-to-fit width)라고 부르는 블록 요소를 원하지만 사양은 그러한 것을 얻을 수 있는 축복된 방법을 제공하지 않습니다. CSS2에서 축소-투-핏은 목표가 아니라 브라우저가 허공에서 너비를 "받아야 하는" 상황을 처리하는 것을 의미합니다. 이러한 상황은 다음과 같습니다.

• 뜨다
• 절대 위치 요소
• 인라인 블록 요소
• 테이블 요소

너비가 지정되지 않은 경우. CSS3에 원하는 것을 추가할 생각을 한다고 들었습니다. 지금은 위의 것 중 하나를 수행하십시오.

기능을 직접 노출하지 않기로 한 결정이 이상하게 보일 수 있지만 그럴 만한 이유가 있습니다. 비쌉니다. 맞춤에 맞게 축소는 최소한 두 번 서식을 지정하는 것을 의미합니다. 요소의 너비를 알 때까지 요소 서식을 시작할 수 없으며 전체 콘텐츠를 거치지 않고 너비를 계산할 수 없습니다. 또한 생각만큼 자주 수축-맞춤 요소가 필요하지 않습니다. 테이블 주위에 추가 div가 필요한 이유는 무엇입니까? 아마도 테이블 캡션만 있으면 됩니다.

buti-oxa

사용하는 것 같아요

 display: inline-block;

작동하지만 브라우저 호환성에 대해 잘 모르겠습니다.

---

div 를 다른 div 에 래핑하는 것입니다(블록 동작을 유지하려는 경우).

HTML:

 <div> <div class="yourdiv"> content </div> </div>

CSS:

 .yourdiv { display: inline; }

mbillard

display: inline-block 은 요소에 추가 여백을 추가합니다.

나는 이것을 추천할 것이다:

 #element { display: table; /* IE8+ and all other modern browsers */ }

보너스: margin: 0 auto 추가하여 #element 중앙에 쉽게 배치할 수도 있습니다.

Salman von Abbas

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

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

• 브라우저 지원
• 사양

Vitalii Fedorenko

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

1. display: inline-block;

   또는

2. display: table;

이 두 display:table; 더 나은 때문에 display: inline-block; 추가 여백을 추가합니다.

display:inline-block; 네거티브 여백 방법을 사용하여 추가 공간을 수정할 수 있습니다.

Shuvo Habib

나를 위해 일하는 것은 다음과 같습니다.

 display: table;

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

Sony Santos

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

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

nikib3ro

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

내가 틀렸다면 정정해 주세요. 100% 확신할 수 없고 현재 직접 테스트할 수 없습니다.

falstro

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

즉 "내재적"이 최신 CSS3 업데이트와 함께 제공됩니다.

 width: intrinsic;

불행히도 IE 는 뒤쳐져 아직 지원하지 않습니다.

추가 정보: CSS 고유 및 외부 크기 조정 모듈 레벨 3 및 사용할 수 있습니까? : 고유 및 외부 크기 조정 .

지금은 <span> 또는 <div> 다음으로 설정하는 데 만족해야 합니다.

 display: inline-block;

trojan

width:1px; white-space: nowrap;

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

Daft Wullie

CSS2 호환 솔루션은 다음을 사용하는 것입니다.

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

또한 div를 띄워서 가능한 한 작게 만들 수 있지만 div 내부에 떠 있는 것이 있으면 clearfix를 사용해야 합니다.

 .my-div { float: left; }

Soviut

좋아, 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>

Alireza

이것은 주석에서 언급되었으며 답변 중 하나에서 찾기가 어렵습니다.

display: flex 를 사용하는 경우 대신 다음을 사용할 수 있습니다.

 div { display: inline-flex; }

이것은 또한 여러 브라우저에서 광범위하게 지원됩니다.

youngrrrr

CSS 파일에 스타일을 넣으면 됩니다.

 div { width: fit-content; }

Hamza

이 코드를 시도해 볼 수 있습니다. 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>

Showrin Barua

display: inline; (또는 white-space: nowrap; ).

이 정보가 유용하기를 바랍니다.

miksiii

inline-block 을 사용할 수 있지만 이전 브라우저에 주의하십시오..

 /* 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/ 에서 이 속성으로 몇 가지 테스트를 볼 수 있습니다.

RPichioli

<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를 테이블... 그리고... 인라인 속성이 있거나 없을 수 있으며 여전히 테이블은 콘텐츠의 전체 너비를 보유할 테이블입니다. =)

Edward

width: max-content 속성을 사용하여 콘텐츠 크기에 따라 div의 너비를 조정합니다.

이 예를 시도하십시오.

 <!DOCTYPE html> <html> <head> <style> div.ex1 { width:500px; margin: auto; border: 3px solid #73AD21; } div.ex2 { width: max-content; margin: auto; border: 3px solid #73AD21; } </style> </head> <body> <div class="ex1">This div element has width 500px;</div> <br> <div class="ex2">Width by content size</div> </body> </html>

Codemaker

작동하는 데모가 여기 있습니다-

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

Abrar Jahin

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

user6558785

Firebug를 조작하면서 OP가 원하는 것을 정확히 수행하고 다음과 같이 사용할 수 있는 -moz-fit-content

 width: -moz-fit-content;

Firefox에서만 작동하지만 Chrome과 같은 다른 브라우저에서는 이에 상응하는 것을 찾을 수 없었습니다.

2hamed

<div class="parentDiv" style="display:inline-block"> // HTML elements </div>

이렇게 하면 상위 div 너비가 가장 큰 요소 너비와 동일하게 됩니다.

Jaimin Dave

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>

James

 div{ width:fit-content; }

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

Awabil George

div 태그 내부에 span 태그를 추가하고 CSS 형식을 외부 div 태그에서 새 내부 태그로 이동하여 비슷한 문제(항목이 가운데에 있었기 때문에 display: inline-block 을 사용하고 싶지 않은 경우)를 해결했습니다. span 태그. display: inline block 이 적합한 답변이 아닌 경우 다른 대안으로 이것을 던지십시오.

Jessica Brown

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

 display: table;

또는,

 display: inline-block;

나는 display: table; , 모든 추가 공간을 자체적으로 처리하기 때문입니다. while display: inline-block 은 약간의 추가 공간 수정이 필요합니다.

Novice

 .outer{ width:fit-content; display: flex; align-items: center; } .outer .content{ width: 100%; } <div class=outer> <div class=content> Add your content here </div> </div>

Trupti M Panchal

div{ width:auto; height:auto; }

AJchandu

출처 : http:www.stackoverflow.com/questions/450903/how-can-i-make-a-div-not-larger-than-its-contents