비슷한 레이아웃이 있습니다.
<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 에서 테스트 )
답변
두 가지 더 나은 솔루션이 있습니다
-
display: inline-block;
또는
-
display: table;
이 두 가지 중 display:table;
, 더 있기 때문에 display: inline-block;
추가 마진을 추가합니다.
들어 display:inline-block;
당신은 여분의 공간을 해결하기 위해 부정적인 여백 방법을 사용할 수 있습니다