다른 텍스트에 맞게 div 크기 조정

Question

그래서 내가 가지고있는 문제는 내가 같은 div ("텍스트")에 적용된 동일한 클래스를 가진 모든 Div의 모든 div의 너비와 높이를 설정하지 않았다는 것입니다. 그 (것)들에있는 원본에 자동 크기를 정하는 것을 허용 한 (당연히 너비 변화의). 불행히도 내가 이것을 할 때 "Text"클래스를 사용하는 다른 div는 div 내부의 텍스트가 가장 많은 div의 너비를 사용합니다. CSS 또는 자바 스크립트를 사용하여 각 div의 너비를 내부의 특정 텍스트에 자동으로 자동 조정할 수 있습니까? (각 div에 수동으로 너비를 지정하지 않아도 됨).

CSS

.Text{ 
    background-color: teal; 
    padding: 7px; 
    margin: auto; 
} 

HTML은

<div class="Text"> 
    <h1>This is Some Text</h1> 
</div> 

<br /> 

<div class="Text"> 
    <h1>This is More Text only longer than the first</h1> 
</div> 

Answer 1

DIV 태그의 기본 CSS는 display: block, position: static;입니다. 그러면 DIV 태그가 해당 컨테이너의 전체 너비를 차지합니다. 귀하의 경우 컨테이너는 가장 긴 DIV을 포함 할 수있을만큼 넓으며 모든 DIV이 해당 공간을 차지하고 있습니다.

.Text{ 
    display: inline-block; 
    background-color: teal; 
    padding: 7px; 
    margin: auto; 
} 

당신은 새로운 라인을 강제로 <BR /> 태그를 사용해야 할 수도 있습니다,하지만 난 당신이 이미하고있는 참조 :

이 문제를 해결하려면, 당신은이처럼 CSS를 설정할 수 있습니다.