programing

어떻게 하면 내용물보다 큰 div를 만들 수 있나요?

padding 2023. 4. 8. 08:01
반응형

어떻게 하면 내용물보다 큰 div를 만들 수 있나요?

다음과 같은 레이아웃이 있습니다.

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

★★★★★★★을 원합니다.div만큼만 table하다.

은 '보다 낫다'를 입니다.div로로 합니다.display: inline-block.

CSS에서 말하는 폭의 축소를 갖는 블록 요소를 필요로 하며, 사양에서는 이러한 요소를 얻을 수 있는 훌륭한 방법을 제공하지 않습니다.CSS2에서는 Swrink-to-Fit은 목표가 아니라 브라우저가 갑자기 폭(폭)을 확보해야 하는 상황에 대처하는 것을 의미합니다.이러한 상황은 다음과 같습니다.

  • 흘러가다
  • 절대 위치 요소
  • 인라인 블록 요소
  • 테이블 요소

너비가 지정되지 않은 경우.CSS3에 당신이 원하는 것을 추가하려고 한다고 들었어요.지금은 위의 것 중 하나로 해결하세요.

이 기능을 직접 공개하지 않기로 한 것은 이상하게 보일 수 있지만 그럴 만한 이유가 있습니다.그것은 비싸다.맞춤 축소란 두 번 이상 형식을 지정하는 것을 의미합니다. 요소의 너비를 알 때까지 형식을 지정할 수 없으며 전체 콘텐츠를 통해 너비를 계산할 수 없습니다.또한 생각만큼 축소/적합 요소가 필요하지 않습니다.왜 테이블 주변에 추가 디바가 필요하죠?아마 표제만 있으면 될 거야.

사용하는 것 같아요.

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 */
}

보너스: 새로운 고급스러움을 쉽게 중앙에 배치할 수 있습니다.#elementmargin: 0 auto.

시험할 수 있습니다(CSS3).

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

두 가지 더 나은 해결책이 있습니다.

  1. display: inline-block;

    또는

  2. display: table;

이 둘 중에 더 나은 이유는display: inline-block;을 사용하다

★★★의 display:inline-block;수.

나에게 효과가 있는 것은:

display: table;

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

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

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

이 어떤 , 는 CSS 의 속성 「」 「」 「」 「」 「」 「」 「」 「」 「CSS」 「」 「」 「」 「」 「CSS」 「」를 믿고 있습니다.float 중 하나left ★★★★★★★★★★★★★★★★★」right을 사용하다한편, 텍스트가 주위에 떠다니게 하는 등 다른 부작용도 있습니다.

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

당신의 질문에 대한 답은 미래에 있습니다 내 친구...

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

width: intrinsic;

아쉽게도 IE는 아직 지원하지 않습니다.

상세: CSS Intelligent & Extrinsic Sizing Module Level 3 및 사용 가능 여부: 내구성 및 외인성 사이징.

해야 합니다.<span> ★★★★★★★★★★★★★★★★★」<div>로 

display: inline-block;

width:1px;
white-space: nowrap;

잘 동작합니다. : )

CSS2 호환 솔루션은 다음과 같습니다.

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

div를 가능한 작게 띄울 수도 있지만 div 안에 떠 있는 것이 있으면 clearfix를 사용해야 합니다.

.my-div
{
    float: left;
}

이것은 코멘트에 기재되어 있기 때문에, 몇개의 답변에서는 찾을 수 없습니다.따라서 다음과 같습니다.

「 」를 사용하고 display: flex어떤 이유로든 대신 다음을 사용할 수 있습니다.

div {
    display: inline-flex;
}

이것은 브라우저 전체에서 폭넓게 지원됩니다.

좋아요, 많은 경우 디폴트로 div가 하는 것처럼 아무것도 할 필요가 없습니다.height ★★★★★★★★★★★★★★★★★」widthauto로 않은 는 auto를 합니다.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>

폭과 높이를 콘텐츠에 맞게 설정하기만 하면 됩니다.그것은 매우 간단하다.

div {

    width: fit-content;
    height: fit-content;
    padding: 10px;

}

패딩 추가 : 10px;생략하면 div 요소가 테이블에 완전히 달라붙어 조금 서툴러 보일 수 있습니다.패딩은 요소의 테두리와 내용 사이에 지정된 공간을 만듭니다.하지만 그것은 강제적이지 않은 당신의 바람이다.

이 코드를 사용해 보세요.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>

CSS 파일에 스타일을 입력하기만 하면 됩니다.

div { 
    width: fit-content; 
}

써보세요.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>

할 수 요.display: inline; (오류)white-space: nowrap;

이게 도움이 됐으면 좋겠어요.

하시면 됩니다.inline-block@user473598 user @ 。

/* 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/

이 Atribute를 사용한 테스트는 https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ 에서 확인할 수 있습니다.

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

2가지 맛의 CSS3 플렉스박스 솔루션위에 있는 것은 스판처럼 동작하고 아래에 있는 것은 디브처럼 동작하며 래퍼의 도움을 받아 모든 폭을 취합니다.클래스는 각각 "위", "아래", "아래"입니다.

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.

파이어버그를 만지작거리다가 부동산 가치를 발견했어-moz-fit-content이는 OP가 원하는 바를 정확히 수행하며 다음과 같이 사용할 수 있습니다.

width: -moz-fit-content;

Firefox에서만 작동하지만 Chrome 등 다른 브라우저에서는 해당 기능을 찾을 수 없었습니다.

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

div{
width:fit-content;
}
<div>
    <table>
    </table>
</div>

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

유사한 문제를 해결했습니다(사용하기 싫었던 부분).display: inline-block항목이 중앙에 위치했기 때문에)를 추가함으로써span안쪽에 태그를 붙이다div태그 및 외부로부터의 CSS 포맷 이동div새로운 내면에 태그를 붙이다span태그. 만약 다른 대안으로 이걸 던져버리면display: inline block당신에게는 적절하지 않은 대답입니다.

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

display: table;

또는,

display: inline-block;

사용하는 것을 선호합니다.display: table;모든 추가 공간을 자체적으로 처리하기 때문입니다.하는 동안에display: inline-block여분의 공간 수정이 필요합니다.

언급URL : https://stackoverflow.com/questions/450903/how-can-i-make-a-div-not-larger-than-its-contents

반응형

'programing' 카테고리의 다른 글

PowerShell에서 문자열이 null인지 빈지 확인하는 방법은 무엇입니까?  (0) 2023.04.08
중복 행을 삭제하려면 어떻게 해야 합니까?  (0) 2023.04.08
SQL Server:동시에 두 개의 테이블에 삽입할 수 있습니까?  (0) 2023.04.08
SQL 문을 sargable로 하는 것은 무엇입니까?  (0) 2023.04.08
버튼을 클릭하면 애니메이션 로드 표시  (0) 2023.04.03

'programing'의 다른글

  • 현재글어떻게 하면 내용물보다 큰 div를 만들 수 있나요?

관련글

댓글

티스토리툴바