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


답변

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

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

답변

나를 위해 일하는 것은 :

display: table;

에서 div. ( FirefoxChrome 에서 테스트 )


답변

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

  1. display: inline-block;

    또는

  2. display: table;

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

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