브라우저 호환성은 항상 CSS 레이아웃에서 일반적인 문제였습니다. 초보자는 많은 오해를 입력했습니다.
이 두 가지 방법에는 다음과 같은 장점이 있습니다.
1. 해킹을 사용할 필요가 없습니다
2. 간단하고 효과적으로, 당신은 한눈에 할 수 있습니다
3. 계층 적 및 모듈 식 레이아웃
4. 코드는 더 합리적이고 식별하기 쉽습니다.
방법 1 : 내부 및 외부 간격을 추가하여 떠 다니는 오정렬 해결
우리는 일반적으로 플로트를 사용하여 멀티 컬럼 레이아웃을 사용해야합니다.
이 효과를 달성하기 위해, 우리는 간격에서 직접 열을 만들기 위해 마진을 추가하고 국경과 패딩을 추가하여 내부 텍스트가 테두리에 달라 붙지 않도록합니다. 그러나 코드가 작성된 후 예상치 못한 상황이 발생했습니다.
세 번째 열에서 바닥으로 실행하십시오. 이것은 당신이 원하는 효과가 아닙니다. 그런 다음 분석하겠습니다. 일반적인 아이디어에 따르면. 전체 너비는 800px이고 왼쪽 열은 200, 중간 400, 오른쪽 열은 200이므로 좋아 보이지만이 열 사이에 간격이 있어야하므로 왼쪽 열 190, 중간 400, 변경해야합니다. 그리고 오른쪽 열 190. 괜찮습니까?
그러나 좋은 외모를 위해 국경을 추가했습니다. 그러나 테두리가 폭을 증가시킬 것이라는 것을 잊어 버렸습니다. -Border 2 = 168, 잘못 정렬되지 않도록. 그러나 조금 복잡하지 않습니까? 일부 브라우저의 레이아웃에는 간격이 있습니다.
좋아, 내 방법에 대해 이야기합시다. 계층에 따르면 레이아웃과 디스플레이를 분리합니다. 레이아웃은 너비 및 부동 외부 피치 외에도 레이아웃을 계산하기가 더 쉽다는 것입니다. 그런 다음 레이아웃 열에 DIV를 추가하여 테두리, 내부 및 외부 간격 등을 표시합니다. 너비를 정의 할 필요가 없습니다. 적응할 수 있습니다. 당신의 기억을 촉진하기 위해, 나는시를 즉흥적으로 만들었습니다. 고정 너비는 경계 나 패치없이 떠 다니고, 내부에 div를 넣고, 스타일을 정의해야합니다!
방법 2 : 외부 층에서 내부 부동 요소를 해결합니다.
제품 카탈로그 또는 사진 앨범을 만들기 위해 UL 또는 N DIV를 사용하여 원하는 효과는 다음과 같습니다.
그러나 상황은 최근에 다음과 같습니다.
이에 대한 해결책은 실제로 매우 간단합니다.
1. 플로트를 추가하여 외부 층에 추가하여 문제를 해결할 수 있습니다.
2. 또 다른 방법은 플로트가 끝난 후 끝에 부동을 제거하기 위해 div를 배치하는 것입니다.
3. 외부 층에 높이 또는 너비를 추가하십시오.