2011-01-11 3 views
22

html과 관련하여 너비와 높이를 직접 정의하는 대신 div 컨테이너를 내용과 함께 커지게하려면 어떻게해야합니까?콘텐츠로 div를 성장시키는 방법은 무엇입니까?

상관없이 로고의 크기가 무엇인지

, 컨테이너는 함께 성장하지 않습니다 (...) 나는이 문제를 해결할 것 (또는 고정 할 수있는 방법을

답변

0

당신이 있습니까? 샘플 코드? div는 항상 컨테이너의 전체 너비가 block-level입니다.

+0

나는 OP가 묻는 지, A가 child (B)를 가지고 있다면 A가 자동으로 B를 감쌀만큼 크게 만들어 지는지 확신한다. 대답은 B가 A의 너비가 될 것이라고 말한다. if 'display : block'입니다. – doug65536

23

너비 및/또는 높이를 정의하지 않으면 div 요소가 내용과 함께 커집니다. 내용이 설정되어 있지 않으면 절대 값으로 설정하십시오! 내용이 float로 설정된 경우 컨테이너로 설정해야합니다.

overflow:hidden 

성장을 위해서!

+0

div 안에 절대로 설정된 요소가 있고 절대 요소를 묶기 위해 자동 크기 조정을 원한다면 어떻게합니까? –

+0

요소의 너비/높이를 지정할 수 있으며 요소의 콘텐츠가 커질 때 동적으로 크기가 변경됩니까? – FrenkyB

+1

얼마나 직관적 인 CSS가 때로는 놀라운 수 있습니다. 아니. – cdonner

6

div의 기본 동작은 사용 가능한 전체 너비를 채우는 것입니다. 몇 가지 방법이를 오버라이드 (override) :

  • display: inline을 설정합니다 (부동, 음,의 부작용과) display: inline-block (안 IE 친화적 인)
  • 플로트로 설정 (하지만 거의 결코 무엇을
  • 하드 코드 폭 (NO 동적 폭하지만)

최후의 수단, consi으로 position: absolute을 설정) 할 der javascript.

0

최소 너비와 최소 높이를 지정할 수 있으며 DIV는 내용이 변경 될 때 너비/높이를 조정합니다 (물론 최소 너비/높이 미만이 아님). 코드에서

Working code pen example

에서 가장 중요한 역할을 한 CSS 속성 (DIV가, 편집 할 수 그래서 그냥 텍스트를 입력하고는 너비/높이에 의해 그것으로 성장할 것입니다) :

min-height: 200px; 
    min-width: 100px; 
2

사용에게 마법의 CSS 속성을 "flex"라고 불리는 것은 정말 놀랍습니다.

yourDiv{ 
display:flex; 
} 

아이들은 절대 위치가 아닙니다 : flex는 작동하지 않기 때문에 절대 위치가 지정되지 않도록하십시오.

+0

은 더 많은 정보가 필요합니다 ... 대답은 가변 높이의 중첩 된 div로 작동하지 않는다는 의미입니다. –

+0

당연히 그렇습니다. div가 절대적인 표시가 아니면 않는 한 매일 사용합니다! – molham556

+0

답변에 포함시킬 편리한 정보 일 수도 있습니다 ... "\t 더 많은 정보가 필요합니다 ... 대답이 작동하지 않으므로 ..." –

관련 문제