내용이 오버플로되도록 컨테이너 div를 중지 할 수 있습니까?

좋아, 빠른 허구 예 :내용이 오버플로되도록 컨테이너 div를 중지 할 수 있습니까?

<div style="background: #CCC; margin: 10px;"> 
<div style="width: 50%; height: 400px; background: #FFF;">Child #1</div> 
<div style="width: 600px; height: 400px; background: #999;">Child #2</div> 
</div>

나는 브라우저 창에 축소에 유지 (그리고 아이를 축소에서 부모 DIV를 중지 할 수있는 방법 미만 600PX 폭 (아이 # 2)에 브라우저의 크기를 조정하는 경우 # 1).

본질적으로 컨테이너 div가 자체 내부의 가장 큰 자식을 치는 경우 컨테이너 div가 더 이상 축소되지 않도록하려면 어떻게해야합니까?

내용이 동적이어서 자녀의 너비를 지정할 수 없으며 문제를 설명하기 위해 아동 # 2의 너비를 설정했습니다. 특정 너비의 요소가있는 경우 동일합니다 (예 : 이미지 또는 완전히 축소 된 테이블 등)

출처

2010-02-08 Leo

외부 요소가 확장 및 축소되도록하여 웹 페이지로 무엇을 하려는지 확실하지 않습니다. 내장을 크기를 설정하도록 강요하지만, 내가 제안 할 첫 번째 것은 바깥 쪽 div에 min-width css 속성을 설정하는 것입니다. 이렇게하기 위해 실행할 문제는 두 곳의 다른 장소에서 같은 값을 지정했기 때문입니다 (css2는 단지 삶의 방식입니다).

제 생각에는 부모의 너비를 자식의 크기로 제한하는 CSS 속성이 없습니다. 그 기능이 절대적으로 필요한 경우 바깥 쪽 div를 표로 바꿀 수는 있지만 디자인을 재평가하는 것이 좋습니다. 아마도 이것이 필요한 이유에 대한 몇 가지 구체적인 내용을 제시 할 수 있다면 우리는 더 많은 것을 도울 수 있습니다. 귀하의 의견을 바탕으로

,이 같은 시도 할 수 :

<html> 
    <head> 
    <title>Hi</title> 
    </head> 
    <body style="margin: 0; padding:0;"> 
    <table style="background: red;padding:100px;width:100%;" cellspacing="0"><tr><td> 
    <table style="background: #CCC; width:100%;border:none;" cellspacing="0"><tr><td> 
     <div style="width: 50%; height: 400px; background: #FFF;">Child #1</div> 
     <div style="width: 600px; height: 400px; background: #999;">Child #2</div> 
    </td></tr></table> 
    </td></tr></table> 
    </body> 
</html>

를 외부 표는 그렇지 않으면 HTML 일 것입니다 무슨의 여백/패딩을 제어하거나 수 있기 때문에 당신이 테이블을 중첩해야합니다 이유는 body 태그. 본문에 여백을 적용하면 페이지 폭에 영향을 미치지 않으며 항상 아래쪽에 스크롤 막대가 생깁니다. 테이블을 중첩하고 패딩을 사용하여 바깥 테이블을 모방하게하면 문제가 해결됩니다. (다른 사람들은 아마도 더 우아한 해결책을 내놓을 수 있습니다.)

즉, 컨테이너 div가 배경색 만 설정하면 화면의 배경색을 설정할 수 있습니다. 당신의 웹 페이지가 정당화된다면 (내 디자이너 친구들이 나를 쏠 것), 브라우저 창이 당신을 위해 효과를 처리 할 것입니다.

출처

2010-02-08 15:13:55

기본적으로 이것은 사이트의 모든 주요 콘텐츠를 보유하고있는 간단한 컨테이너 div입니다. 이 컨테이너 div가 그 안에있는 가장 넓은 요소보다 더 축소되는 것을 원하지 않습니다. 이것을 허용하면 가변 폭의 conatiner 안의 다른 요소를 더 줄일 수 있습니다. 이 html을 C & P로 작성하고 브라우저에서 시험해 보는 경우 연한 회색이 어두운 회색보다 더 축소되는 것을 원하지 않습니다. (그러나 나는 어두운 회색의 폭이 특정 경우에 어떤 것인지 알지 못합니다.) – Leo

나는 내용의 일부가 고정되어있는 동안 컨테이너 크기를 조정하는 것이 왜 중요한지 설명 할 수 있습니까? 네가하려는 일을 잘 알고 있지만, 네가하는 일을 성취하기 위해 노력하고있는 것이 무엇인지 이해한다면 더 나은 방법이있을 수있다. –

표준 왼쪽 메뉴/오른쪽 콘텐츠 시나리오를 상상해보십시오. 콘텐츠 내부에 담긴 내용은 다양하며 제어 된 방식 (동적 콘텐츠)으로 무엇이 들어 있는지 알 수있는 방법이 없습니다. 그래서 컨테이너에 내용이 넘치지 않도록하려고했습니다. 오버플로를 숨기고 싶지 않습니다. 용기가 넓어지면 컨테이너가 축소되는 것을 원하지 않습니다.따라서 기본적으로 브라우저를 옆으로 스크롤해야 볼 수 있습니다 (예 : 큰 이미지로 말하기). 효과적으로 나는 알지 못하는 가장 넓은 자식에 따라 컨테이너의 최소 폭을 설정하려고합니다. – Leo

NickLarsen의 사려 깊고 완벽한 답변에서 영감을 얻으십시오. 컨테이너에 display: table-cell을 사용해보세요.

출처

2010-02-08 15:24:42 graphicdivine

여기서 문제는 컨테이너가 가장 넓은 자식보다 확장되지 못하도록한다는 것입니다. 또한 이것은 ie7/6에서 작동하지 않을 것입니다. – Leo

내용이 오버플로되도록 컨테이너 div를 중지 할 수 있습니까?

답변

관련 문제