CSS 3열 레이아웃에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS 3열 레이아웃에 대한 자세한 설명

php中世界最好的语言

풀어 주다： 2018-03-20 16:34:52

원래의

1308명이 탐색했습니다.

이번에는 CSS 3열 레이아웃에 대한 자세한 설명을 가져왔습니다. CSS 3열 레이아웃의주의사항은 무엇인가요?

이 글에서는 CSS의 고전적인 3열 레이아웃 방식을 소개하고 이를 모든 사람과 공유하고 직접 메모해 보세요. 세부 사항은 다음과 같습니다.

3열 레이아웃은 이름에서 알 수 있듯이 양쪽이 고정되어 있습니다. 중간에는 적응력이 있습니다. 3열 레이아웃은 개발에서 매우 일반적입니다

1. float 레이아웃

가장 간단한 3열 레이아웃은 레이아웃에 float를 사용하는 것입니다. 먼저 왼쪽과 오른쪽 열을 그립니다:

로그인 후 복사

이때 왼쪽과 오른쪽 열의 분포를 얻을 수 있습니다:

다음으로 중간 열을 처리하는 방법을 살펴보겠습니다. 우리는 float 요소가 문서 흐름에서 벗어나고 다른 상자에서는 이 요소를 무시한다는 것을 알고 있습니다. (그러나 다른 상자의 텍스트는 여전히 이 요소를 위한 공간을 만들고 둘러쌉니다.) 따라서 이때 컨테이너 컨테이너에 일반 p만 추가하면 왼쪽과 오른쪽을 무시하고 전체 컨테이너를 채울 것입니다. 다만 게다가 여백은 왼쪽 오른쪽으로 공간이 흘러나온다:

로그인 후 복사

이때 보이는 효과는 왼쪽과 오른쪽 열이 두 번째 행으로 압착되는 것입니다. 이는 메인의 너비가 100%이기 때문입니다. 다음으로 왼쪽과 오른쪽 열의 여백을 조정하여 왼쪽, 가운데, 오른쪽을 한 줄에 넣습니다.

.left { float: left; width: 100px; height: 200px; margin-left: -100%; background-color: red; } .right { float: left; width: 100px; height: 200px; margin-left: -100px; background-color: yellow; }

로그인 후 복사

두 번째 단계는 왼쪽의 여백-왼쪽을 -100%로 설정하는 것입니다. 왼쪽 열은 첫 번째 줄의 시작 부분으로 이동합니다. 그런 다음 오른쪽의 왼쪽 여백을 너비의 음수 값인 -100px로 설정하면 오른쪽 열도 왼쪽 및 중간 열과 동일한 줄로 이동됩니다.

그러나 아직 끝나지 않았습니다. 메인에 텍스트를 추가하려고 합니다.

fjlskdjflkasjdfljasdljlsjdljsdjflksadj

로그인 후 복사

텍스트가 표시되지 않는 것을 볼 수 있으며 다음에는 이 문제를 해결해야 합니다.

세 번째 단계는 컨테이너에 패딩을 제공하는 것입니다. 패딩은 왼쪽 및 오른쪽 열의 너비와 정확히 동일해야 합니다.

.container { padding-left: 100px; padding-right: 100px; }

로그인 후 복사

이때 표시되는 결과는 왼쪽, 중간 및 오른쪽 열이 모두 있다는 것입니다. 전체적으로 축소되었지만 텍스트는 여전히 억제되어 있습니다.

네 번째 단계는 왼쪽 및 오른쪽 열에 상대 레이아웃을 추가한 다음 왼쪽 및 오른쪽 값을 설정하여 바깥쪽으로 이동하는 것입니다.

.left { float: left; width: 100px; height: 200px; margin-left: -100%; position: relative; left: -100px; background-color: red; } .right { float: left; width: 100px; height: 200px; margin-left: -100px; position: relative; right: -100px; background-color: yellow; }

로그인 후 복사

지금까지 완료되었습니다.

4. 이중 비행 날개 레이아웃

이중 비행 날개 레이아웃의 처음 두 단계는 성배 레이아웃과 동일하지만 중간 열의 콘텐츠가 차단되는 문제에 대한 해결책이 다릅니다.

메인 부분의 콘텐츠가 차단되므로 메인 내부에 콘텐츠를 추가하고 여백을 설정하여 가려짐을 방지하면 문제가 해결될 수 있습니다.

로그인 후 복사

유일하게 주의할 점은 뒤에 요소를 추가해야 한다는 것입니다. 플로트를 지우는 메인.

5. Flex 레이아웃

flex를 사용하여 3열 레이아웃을 구현하는 것도 매우 간단하지만 브라우저 호환성에 주의해야 합니다.

fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj

로그인 후 복사

몇 가지 사항이 있습니다. 주의하세요:

main要首先加载就必须写在第一位，但因为left需要显示在最左侧，所以需要设置left的order为-1
flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心，main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分，同时因为指定了left right部分的flex-basis，所以指定了两者的宽度，保证其显示效果

6.绝对定位

绝对定位的方式也比较简单，而且可以优先加载主体：

fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj

로그인 후 복사

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！