2016-08-24 1 views
0

동일한 컨테이너 아래에있는 2 개의 요소에 공통 배경색을 지정하려고합니다.떠 다니는 자식 요소에 배경색을 설정하는 방법은 무엇입니까?

두 요소 모두에 대해 id을 설정했습니다. 두 번째 요소에 대해서는 right입니다. 왼쪽은 float:left이고 오른쪽은 float:right이고 두 가지 모두 너비는 45%입니다. 컨테이너의 너비는 80%이고 여백은 오른쪽이고 너비는 auto입니다.

컨테이너에 background-color을 설정하면 하위 배경색이 변경되지 않지만 왼쪽 요소에 background-color을 설정하면 작동합니다.

두 자식 요소의 배경색을 설정하는 방법은 무엇입니까?

+2

은 부모에, 아이들에 배경 색상을 사용하지 마십시오. – z3nth10n

+2

jsfiddle 또는 일부 코드를 제공 할 수 있습니까? – mmmoustache

+0

브라우저의 검사기 도구를 사용하면 요소를 플로팅 할 때 문서의 정상적인 흐름에서 제거합니다. 컨테이너 높이가 '0'으로 표시됩니다. 배경이 표시되지 않습니다. – skyline3000

답변

0

요소가 float이면 정상적인 문서 흐름에서 제거됩니다. 이제 컨테이너의 높이가 0이됩니다. 즉, 배경을 볼 수있는 높이가 없음을 의미합니다. 이 문제를 해결하려면 컨테이너에 overflow:auto을 설정할 수 있습니다.

는 CSS에이 문서에 대한 설명은 수레 참조 : http://www.quirksmode.org/css/clearing.html

+0

대단히 감사합니다. –

관련 문제