wulin.com의 기사 소개 (www.vevb.com) : CSS3+HTML5 연구 노트 4-CSS 3 열 레이아웃 width 전용 적응.
과거에는 3 열 레이아웃을 할 때 가장 일반적이고 간단한 방법은 다음과 같습니다. 플로트+여백을 사용하여 구현합니다. CSS3의 시대에는 CSS3의 박스 모델 인 또 다른 세련된 방법을 가질 수 있습니다. 코드는 다음과 같이 코드가 있습니다.
CSS3 3 열 레이아웃 CSS3 3 열 레이아웃 MiddlelEftrightGoogle 크롬의 작동 효과는 다음과 같습니다.
요약 : Box-Flex 속성은 주로 여기에 사용됩니다. 이 속성은 주로 자식 컨테이너가 부모 컨테이너에 대한 특정 규칙에 따라 너비를 나눌 수있게합니다. 3 개의 아동 컨테이너가 Box-Flex 값을 각각 1, 2 및 3으로 설정하면 3 개의 아동 컨테이너는 폭을 1 : 2 : 3의 비에 따라 나눕니다.
물론, 부모 컨테이너는 디스플레이와 같은 효과를보기 위해 상자 모델로 설정되어야합니다. -webkit-box; 디스플레이 : -moz-box;
그러나 위의 코드를 직접 실행하면 Chrome에서는 아무런 문제가 없지만 Firefox와 관련하여 다음이됩니다.
, 이것은 Firefox 버그입니까? 원래 왼쪽과 오른쪽의 너비는 고정되었지만 중간의 너비는 적응성 너비가 없었습니다. "HTML5 및 CSS3에 대한 권위있는 안내서"의 저자와 의사 소통 한 후, 부모 컨테이너의 너비가 설정되지 않기 때문에이 상황이 발생한다는 것을 깨달았습니다. 부모 컨테이너에 너비를 추가하십시오. . . "HTM5 및 CSS3 권위 가이드"의 저자에게 감사합니다.