前言
在使用 CSS 进行布局的时候，我们通常会用到 div 布局和 float padding margin position 之类的CSS属性，使用不同的组合可以得出很多的布局方案。本篇介绍的是三栏布局方案中的双飞翼布局和圣杯布局，它们解决的问题是一样的：左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化。它们的实现方案在前半部分大同小异，不同之处是如何使中间部分的内容不被两侧遮挡。
准备阶段
此部分属于双飞翼布局和圣杯布局实现方案的前半部分，实现原理是利用 float 和 negative margin 技术。可以按以下步骤进行：
-
按 middle left right 的顺序写出三个 div ，设置 left 和 right 固定宽度分别为 190px ， 220px （可以给这三栏都加上 min-height ，让它们的初始高度一致。还可以给作为容器的 container 加上 min-width ，以避免窗口宽度缩小时，中间部分消失的问题）
-
给这三栏都加上 float: left
-
给 middle 加上 width: 100% ，这时候 left 和 right 会被挤下去
-
给 left 加上 margin-left: -100% ，拉到 middle 的左边
-
给 right 加上 margin-left: -220 px ，拉到 middle 的右边
在准备阶段完成后，中间部分的内容会被两侧遮挡到，接下来分别介绍两种布局对于该问题的解决方案。
解决方案
双飞翼布局
给 middle 加一层包裹 middle-wrap ，并设置其 margin: 0 220px 0 190px
以下是完整的代码实现：
<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>双飞翼布局</title> <styletype="text/css"> *{ margin: 0; padding: 0; } .middle, .left, .right{ float: left; min-height: 200px; } .middle{ width: 100%; background-color: green; } .middle-wrap{ margin: 0 220px 0 190px; } .left{ width: 190px; margin-left: -100%; background-color: red; } .right{ width: 220px; margin-left: -220px; background-color: blue; } .container{ min-width: 600px; } .header, .footer{ text-align: center; background-color: yellow; } .footer{ clear: both; } </style></head> <body> <divclass="header"> <h2 id="header">header</h2> </div> <divclass="container"> <divclass="middle"> <divclass="middle-wrap"> <h2 id="middle">middle</h2> </div> </div> <divclass="left"> <h2 id="left">left</h2> </div> <divclass="right"> <h2 id="right">right</h2> </div> </div> <divclass="footer"> <h2 id="footer">footer</h2> </div></body> </html> 圣杯布局
-
给这三栏的容器 container 加上 padding: 0 220px 0 190px，这会使整个容器左右两边各留出 190px 和 220px 的 padding 。
-
对 left 和 right 设置相对定位 position: relative 和偏移量，从而将它们移动到左右两边的 padding 中。
以下是完整的代码实现：
<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>圣杯布局</title> <styletype="text/css"> *{ margin: 0; padding: 0; } .middle, .left, .right{ float: left; min-height: 200px; } .left, .right{ position: relative; } .middle{ width: 100%; background-color: green; } .left{ width: 190px; margin-left: -100%; left: -190px; background-color: red; } .right{ width: 220px; margin-left: -220px; right: -220px; background-color: blue; } .container{ padding: 0 220px 0 190px; min-width: 600px; } .header, .footer{ text-align: center; background-color: yellow; } .footer{ clear: both; } </style></head> <body> <divclass="header"> <h2 id="header">header</h2> </div> <divclass="container"> <divclass="middle"> <h2 id="middle">middle</h2> </div> <divclass="left"> <h2 id="left">left</h2> </div> <divclass="right"> <h2 id="right">right</h2> </div> </div> <divclass="footer"> <h2 id="footer">footer</h2> </div></body> </html> 结论
-
两种布局都可以实现中间内容最先加载。
-
相比圣杯布局，双飞翼布局多创建了一个 div ，但不用相对定位。双飞翼布局兼容性很好，可以兼容到IE6。此处的圣杯布局经个人测试，可以兼容到IE8。
参考文章
CSS布局 — 圣杯布局 & 双飞翼布局
双飞翼布局介绍-始于淘宝UED
圣杯布局
CSS布局终极方案之–圣杯布局
HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AMWebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AMHTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.
HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)
HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AMHTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PMHTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AMHTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AManexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
메뉴에서 점선 분할 효과의 중심 정렬을 달성하기 위해 CSS의 Flexbox 레이아웃을 사용하는 방법은 무엇입니까?Apr 05, 2025 pm 01:24 PM메뉴에서 점선 분할 효과를 설계하는 방법은 무엇입니까? 메뉴를 설계 할 때는 일반적으로 접시 이름과 가격 사이에 왼쪽과 오른쪽을 정렬하는 것이 어렵지 않지만 점선 또는 중간의 점은 어떻습니까?
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
드림위버 CS6
시각적 웹 개발 도구
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
