CSS 유체 레이아웃 - 텍스트 영역

을 통해 확장 I 다음 HTML & CSS를 가지고 :CSS 유체 레이아웃 - 텍스트 영역

당신은 창 크기, 빨간색 상자를 줄이고 텍스트 때문에 줄 바꿈의 회색 영역에 걸쳐 확장 http://jsfiddle.net/j8aFS/1/.

이 문제를 방지하려면 어떻게해야합니까? 이 문제를 방지 할 수 있습니까? CSS의 white-space: nowrap; 속성을 사용하여

하지만이 이 최선의 해결책없는 것 같다 :
내가 지금까지 시도 무엇
.
단순히 빨간색 상자 아래에 공간을 남겨 둡니다. 그러나 이것은 디자인에 너무 많은 영향을줍니다.

달성하고자하는 것 : 회색 상자가 커져서 빨간색 상자가 회색 상자 위로 확장되지 않아야합니다. 빨간색 상자 안의 텍스트는 잘리지 않아야합니다.

출처

2012-07-06 Sven

을 떠 것인가?

회색 상자 position relative을 오버플로로 설정하면 빨간색 상자가 잘립니다. 윈도우가 작게

DEMO

당신이 빨간색 상자의 설정 폭을 지정하지 않으면

.div1 { 
    height: 62%; 
    background-color: grey; 
    overflow: hidden; 
    position: relative; 
}

, 그것은 키가 크고 오버 플로우 얻을하게됩니다. 당신은 그것을 숨길 수 있습니다 (나의 해결책), 오버 플로우 (현재의 행동) 또는 절대 위치를하지 않고 회색 상자를 더 크게 만들도록하십시오. 귀하의 질문에 그것이 무엇을 원하는지 전혀 명확하지 않습니다.

Updated demo

출처

2012-07-06 00:37:12 sachleen

답장을 보내 주셔서 감사합니다. 귀하의 질문에 대답하기 위해 위의 질문을 편집했습니다. 위치 절대 값을 제거하면 마진 때문에 빨간색 상자가 회색 활 아래에 위치합니다. 여백을 조정하면 회색 상자에서도 원하지 않는 위치가 변경됩니다. – Sven

'.div1'의 위치를'relative'로 지정하고'# div2'를'absolute'의 위치에두면 원하는 행동을 취하게됩니다. 빨간색 박스의 내용에 관계없이 너비 나 높이가 증가하지 않게하려면 고정 너비와 높이를 지정하고'#box2'에'overflow : hidden'을 지정해야합니다. – sarcastyx

@Sven은 여전히 당신이 달성하고자하는 것을 정확히 모르지만 .. 다른 데모로 업데이트했습니다. 그것이 당신을 바른 길로 인도하는지보십시오. – sachleen

당신은 빨간색 상자
작은 화면의 뷰포트에 대한 width: 180px을 설정할 수 있습니다. 당신이 당신의 상자가 절대 위치 would'nt 경우
, 상자 아래에 당신이 대신 일이하고 싶어뿐만 아니라

출처

2012-07-06 00:37:05 wolfv

CSS 유체 레이아웃 - 텍스트 영역

답변

관련 문제