CSS에서 Divs 사용시 문제가 발생했습니다.

Question

div가로드되어 있으며 왼쪽 또는 오른쪽으로 정렬되어 지워집니다.

http://i54.tinypic.com/2hxm3wk.jpg

기본적으로, 상단 절반에 두 개의 div가 그것을 왼쪽 상단 회색 상자가 없을 것 것처럼, 그래서 다른 방향으로 자신의 위쪽과 아래쪽에 만족하지만 떴다 :하지만 여기에 몇 가지 이상한 행동을 좌우로 또는 오른쪽 상단 회색 상자 위, 단지 그 아래에 있습니다.

같은 상황이지만 아래쪽과 반대입니다.

어떤 도움이 필요합니까?

Answer 1

두 개의 부유 요소를 한 줄에 합친 너비가 컨테이너 너비보다 클 수 있습니다 (너비 + 여백 + 여백 + 테두리를 고려해야합니다 ...)?

이 예는

#container{ 
    width:400px; 
    border:1px solid red; 
    overflow:auto; 
} 
.left{ 
    float:left; 
} 
.right{ 
    float:right; 
} 
.box{ 
    width:140px; 
    border:1px solid green; 
} 
.clear{ 
    clear:both; 
    margin:30px 0; 
} 
.short{height:30px} 
.long{height:130px;}