css에서 java window.pack()과 동일합니다.

Question

저는 CSS에서 매우 새로 운 것입니다. <div> 주위에 테두리를 만들려고하는데 div 안에있는 요소의 크기로 제한되고 div에 표시되거나 숨겨져있을 수있는 개체에 비례하여 동적으로 크기가 조정되기를 원합니다.

나는 border-radius:과 em 측정을 망쳐 봤지만 많은 진전을 이루지는 못했다. 나는 here과 here을 보았지만 둘 다 실제로는 java의 window.pack()에 해당하는 것으로 연결되지 않습니다. 나는 CSS, 자바 스크립트, jquery를 사용하고있다. 나는 그것이 중요하다고 생각하지 않지만 html은 주로 ejs를 통해 작성됩니다.

{ 
border-style: solid; 
border-color: blue; 
border-radius: 1-4 length|%/1-4 length|%; 
} 

Answer 1

좋아, 난 당신이 요구하는지 알고 있다고 생각 :

이

내가 현재 가지고 있지만 단지 상자 페이지의 폭이 것입니다.

문제는 div가 기본적으로 display:block이므로 div (명시 조건, 절대 위치 지정 등과 같은 특정 조건이 충족되지 않는 한) 컨테이너 전체에서 확장 될 수 있다는 점입니다.

빠른 수정 : 내용이 커지거나 줄어들려면 display:inline-block으로 설정해야합니다.

CSS 상자 모델을 공부해야합니다. Here's a decent article to help with that

테두리는 div의 "외부"에 있습니다. div (표시 : 인라인 블록으로 설정된 경우)는 자동 너비 (일명 width: auto)와 높이 (height: auto)로 기본 설정되어 자식이 커지거나 줄어들게됩니다. 국경이 div의 외부에 있기 때문에 div가 성장하고 줄어들고 있습니다.

조금 더 고급 div 콘텐츠와 테두리 사이에 여백을 추가하려면 CSS : padding: 3px의 여백 만 설정하면됩니다. padding은 div의 "outside outside"이지만 국경 앞에 있습니다. 그 말이 맞는다면.

편집 : 도구에 익숙하지 않은 경우 : You might try playing with your HTML and CSS in something like JSFiddle.