目录
-
- 一列定宽,一列自适应屏幕宽
- 方法二:position+margin
- 方法三:float+负margin
- 一列定宽,一列自适应屏幕宽
-
- 左右两栏宽度固定,中间宽度自适应
- 左右两栏宽度自适应,中间宽度固定
- 方法一 中间定宽,借助负margin值
本文主要介绍网页中常用的三栏布局的实现方法。
本文主要参考了下面的文章:
我熟知的三种三栏网页宽度自适应布局方法 -张鑫旭
两栏布局,三栏布局,等高布局,流式布局 -小七
CSS布局——左定宽度右自适应宽度并且等高布局 -w3cplus
八种创建等高列布局两栏布局
一列定宽,一列自适应屏幕宽
要实现的目标是: 左侧固定宽,右侧自适应屏幕宽。
方法一:float+margin
思路:左边浮动,右边加上一个margin-left值,即可实现左边固定,右边自适应布局。
HTML和CSS如下:
两栏布局方法一
- html
- css
<div id="left"></div><div id="content"></div>
点击这里查看Demo
方法二:position+margin
思路:左边绝对定位,右栏使用margin-left实现。
HTML和CSS如下:
两栏布局方法二
- html
- css
<div id="left">左边内容</div><div id="content">主要内容</div>
点击这里查看Demo
方法三:float+负margin
思路:利用浮动和负边距实现。
HTML和CSS如下:
两栏布局方法三
- html
- css
<div id="left">左边内容</div><div id="content"> <div id="contentInner">主要内容</div></div>
点击这里查看Demo
两列固定宽度
边栏在左,主内容在右
HTML和CSS如下:
两栏左右宽度固定布局
- html
- css
<div class="wraper"> <div class="header"> <h1 id="这是头部文字">这是头部文字</h1> </div> <div class="aside sidebar"> <h2 id="这是侧边栏">这是侧边栏</h2> </div> <div class="main-content"> <h2 id="主要内容">主要内容</h2> </div> <div class="footer"> <h2 id="这是底部内容">这是底部内容</h2> </div></div>
点击这里查看Demo
边栏在右,主内容在左
可以保持上面代码中的HTML结构不变,仅仅可以CSS中侧边栏的浮动方式即可:
两栏左右宽度固定布局2
- html
- css
<div class="wraper"> <div class="header"> <h1 id="这是头部文字">这是头部文字</h1> </div> <div class="aside sidebar"> <h2 id="这是侧边栏">这是侧边栏</h2> </div> <div class="main-content"> <h2 id="主要内容">主要内容</h2> </div> <div class="footer"> <h2 id="这是底部内容">这是底部内容</h2> </div></div>
点击这里查看Demo
其他实现两列固定宽度布局的方式:
http://www.w3cplus.com/css/layout/fixed-layout/two-columns-2.html
http://www.w3cplus.com/css/layout/fixed-layout/two-columns-3.html三栏布局
要实现的目标是:左中右三栏布局,左右两栏宽度固定(设为200px),中间宽度自适应。
左右两栏宽度固定,中间宽度自适应
方法一:绝对定位法
思路:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用margin值撑开距离。HTML和CSS如下:
三栏布局之绝对定位
- html
- css
<div id="left"></div><div id="main"> <div class="box">中间内容</div></div><div id="right"></div>
点击这里查看Demo
这种方法的缺点在于:如果中间栏含有宽度的内部元素(box),当浏览器的宽度小于一定程度时,左右两侧的固定栏和中间的box发生层叠。
方法二:margin负值法
思路:首先,中间的主体是使用双层标签,外层div宽度100%显示,并且浮动。内层的div为真正的主体内容,含有左右200px的margin值。左栏和右栏都是用margin负值法,左栏左浮动,margin-left为-100%,使左栏的div定位到页面左侧;右栏也是左浮动,其margin-left值负值,大小是本身的宽度200px。
HTML和CSS如下:
三栏布局之margin负值法
- html
- css
<div id="main"> <div id="content">中间内容</div></div><div id="right"></div><div id="left"></div>
点击这里查看Demo
这种方法需要注意的是几个div的顺序, 先是主体部分div,然后再是左右两栏的div。同样存在方法一的不足,当中间栏含有一定宽度的内部块元素时,缩小浏览器窗口左右栏内容和中间块元素重叠。
方法三:自身浮动法
应用了标签浮动跟随特性,左栏左浮动,右栏右浮动,主体放在后面,可以实现自适应。
这里几个div的顺序关键是主体的div放在后面,左右两栏顺序任意。
HTML和CSS如下:
三栏布局之自身浮动法
- html
- css
<div id="right"></div><div id="left"></div><div id="main"></div>
点击这里查看Demo
这个方法的优点是简洁高效,缺点也很明显,中间栏要避免 clear: both
双飞翼布局
使用浮动,负边距,和相对定位来实现。优点:
- 实现内容和布局的分离
- mian部分是自适应宽度的,任何一栏都可以是最高一栏
- 需要的hack少,在浏览器中兼容性好
缺点:main需要额外的包装层
HTML和CSS如下:
双飞翼布局
- html
- css
<div id="page"> <div id="head">head</div> <div id="body"> <div class="main"> <div class="main-content">Main-content</div> </div> <div class="Sub">sub</div> <div class="Extra">Extra</div> </div> <div id="foot">Foot</div></div>
先把最重要的main放到前面,并将main占满100%,然后是sub, extra。将三者都采用浮动布局: float:left,利用margin-left: -100%,把sub拉倒最左边,同理用margin-left: -180px将extra放到右侧。这样将sub 和extra定位到正确的位置。然后定位main:给main增加一层包裹,里层的main-content的作用目标是定位main到合适的位置,为此,引入margin。
点击这里查看Demo
圣杯布局
圣杯布局和双飞翼布局都是实现两边顶宽,中间自适应的三栏布局,中间栏放在文档流前面优先渲染。两者不同之处在于”中间栏div的内容不被遮挡的实现思路”:
- 双飞翼布局如上介绍,是在main的内部又创建div来放置内容,在该div里设置margin-left和margin-right为左右两栏div留出位置。
- 圣杯布局的实现思路是将div设置padding-left和padding-right后,将左右两个div用相对布局position:relative并配合right和left属性,以便左右两栏div移动后不被遮挡。
HTML和CSS如下:
圣杯布局
- html
- css
<div id="page"> <div id="header"> This is the Header</div> <div id="container"> <div id="center" class="column" >Main content</div> <div id="left" class="column" >left sidebar </div> <div id="right" class="column" > right sidebar </div> </div> <div id="footer-wrapper"> <div id="footer">This is the footer </div> </div></div>
点击这里查看Demo
左右两栏宽度自适应,中间宽度固定
方法一 中间定宽,借助负margin值
HTML和CSS如下:
三栏布局之中间固定
- html
- css
<div id="left"> <div class="inner"></div></div><div id="main"> <div class="inner"></div></div><div id="right"> <div class="inner"></div></div>
点击这里查看Demo
使用这种方法实现的效果不太理想,当浏览器窗口缩小的时候,左右两侧的内容就会被”挤掉”
方法二 使用flex
HTML和CSS如下:
三栏布局之中间固定
- html
- css
<div class="grid"> <div class="col fluid">左侧内容</div> <div class="col fixed">中间</div> <div class="col fluid">右侧内容</div></div>
点击这里查看Demo
清除浮动
用来解决父元素高度自适应高度最大的子元素。只需在浮动元素父元素添加伪类:
.container:after { content: ""; display: block; clear: both;}
未完待续。。。

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 English version
Recommended: Win version, supports code prompts!

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)
