이 레이아웃을 감안할 때 : 그러나 width:99999px; 설정, http://jsfiddle.net/7xVAu/HTML/CSS 오버 플로우 문제
두 번째 (노란색) 예 메신저로, 회색 요소가 완전히 컨테이너의 오버 플로우에 대한 행복을 목표로 레이아웃 메신저입니다입니다 ' 해키 '접근법.
회색 상자에 position:absolute을 설정하면 원하는 효과가 나타나지만 다음 요소의 간격이 제거되고이 요소에 height 속성을 설정할 수 없습니다.
깔끔한 솔루션이 있습니까?
편집 : 설명을 위해 : width:99999px 버전과 똑같이 동작하고 싶지만 width:99999px 설정이 없으면 해킹 방법이라고 생각합니다.
귀하의 질문을 정확하게 이해할 수 있을지 확실하지 않습니다. 그러나 같은 일을하는 다른 방법을 찾고 있다면 이것을 확인하십시오 : http://jsfiddle.net/7xVAu/15/.
jsfiddle에서와 같이 %를 사용하고 position:relative;을 사용하십시오. 보시다시피, 동일한 효과를 주지만, %는 컨테이너의 크기에 따라 다르므로 더 큰 이점이 있습니다. 노란색 컨테이너의 너비를 조정하면 회색 상자도 조정되며 노란색 상자가 넘쳐 흐릅니다 :) 또한 문제없이 높이를 조정할 수 있습니다.
희망이 도움이되었습니다.
텍스트가 떠있는 무언가 like this 일 수도 있습니다.
style="background:#777; margin:0 9px 9px 9px; float:left; white-space:nowrap; height:40px;"
비록 내가 질문을 이해할 지 모르겠다.
당신이 찾고있는 것이 명확하지 않습니다. 회색 상자에는 한 줄의 텍스트 만 있거나 여러 줄로 묶어야합니까? 항상 페이지 전체에 걸쳐 있어야합니까, 아니면 필요한만큼 넓어 야합니까? –
@RoddyoftheFrozenPeas, 질문에서 명확히했습니다 :) – maxp
그래서 회색 div는 내부 텍스트를 맞추고 한 줄에 모두 표시하는 데 필요한만큼 커야합니다. –