나는 왼쪽으로 두 개의 DIV를 플로팅하려고하는데, 가장 왼쪽 DIV는 너비가 설정되고 맨 오른쪽 DIV가 나머지 공간을 차지합니다. 나는 이것이 효과가 있다고 생각했지만 그렇지 않습니다.
<div class="container">
<div class="left">
content left
</div>
<div class="right">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
.container {
overflow: auto;
width: 600px;
background-color: lightgreen;
}
.left {
width: 50px;
float: left;
background-color: lightblue;
}
.right {
float: left;
background-color: lightpink;
}
나는 여기에서 많은 관련 질문을 읽었으며 그 중 많은 것들이 overflow: hidden부모 컨테이너에 추가 할 것을 제안 했지만 시도한 것은 아무것도 작동하지 않았습니다!
lorem ipsum 텍스트의 대부분을 몇 단어 만있는 지점까지 제거하면 (즉, 너비를 컨테이너보다 작게 만드는 경우) 가장 오른쪽 DIV가 예상대로 왼쪽으로 떠 있습니다.
이 작업을 어떻게 할 수 있습니까?
사용 가능한 모든 수평 너비를 포함하려면 흐름의 두 번째 요소가 플로팅되지 않아야합니다.
옆에 두지 않고 뒤에 두지 않으려면 레이아웃을 트리거해야합니다. overflow:hidden예를 들어 사용할 수 있습니다 . 데모
.container {
overflow: auto;
width: 600px;
background-color: lightgreen;
}
.left {
width: 50px;
float: left;
background-color: lightblue;
height: 400px;
}
.right {
overflow:hidden;/* trigger layout to mind floatting elements inside and outside*/
background-color: lightpink;
}
높이가 같은 열의 경우 display:tableparent 및 display:table-cellchilds에서 사용할 수 있으며이 float경우 모든 규칙을 제거하십시오 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다