CSS实现页面两列布局与三列布局的方法示例

ttx9n · 发表于 2016-6-23 11:52:59

这篇文章主要介绍了CSS实现页面两列布局与三列布局的方法示例,包括宽度与高度的自适应的示例,需要的朋友可以参考下 1. 使用BFC的原理实现
BFC的规则之一，就是BFC区域，不会与float box重叠，因此我们可以利用这一点来实现3列布局。
html代码如下
XML/HTML Code复制内容到剪贴板

<div class="left"></div>
<div class="right"></div>
<div class="main"></div>

css代码如下
CSS Code复制内容到剪贴板

.left {
float: left;
margin-right: 10px;
width: 100px;
height: 100px;
background-color: orange;
}
.rightright {
float: rightright;
margin-left: 10px;
width: 100px;
height: 100px;
background-color: orange;
}
.main {
height: 100px;
background-color: green;
overflow: hidden;
}

2.双飞翼布局
这种布局方案最早由淘宝提出，主要为了主列能够被最先加载。
实现原理：
（1）让主列外面添加一个wrap，主列wrap，以及2子列都左浮动。
（2）设置主列wrap宽度为100%，将子列的margin-left设置为负值，让子列能够排列在左右两侧。
（3）这是主列的margin-left与margin-right比左右两列的宽度大一点，则可以设置出来主列与子列之间的间隙。
html代码如下
XML/HTML Code复制内容到剪贴板

<div class="wrap">
<div class="main-content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>

css代码如下
CSS Code复制内容到剪贴板

.wrap {
width: 100%;
}
.wrap::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.main-content {
float: left;
width: 100%;
}
.main {
height: 100px;
background-color: green;
margin-left: 110px;
margin-right: 110px;
}
.left {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-left: -100%;
}
.rightright {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-left: -100px;
}

3.圣杯布局
圣杯布局在结构上要简单一点，也能够让主列优先加载。
实现原理：
（1）添加一个包裹框，设置padding-leftpadding-right值，比子列宽度大一个空隙的宽度。
（2）主列，子列都设置为float: left 左子列margin-left设置为-100%，并且设置为position:relative; left: -110px将左子列放置到左侧。右子列同理。
（3）主列只需设置宽度为100%即可。包裹框的宽度不要设置为100%，自适应即可。
html代码如下
XML/HTML Code复制内容到剪贴板

<div class="wrapper">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>

css代码如下
CSS Code复制内容到剪贴板

.wrapper {
padding-left: 110px;
padding-right: 110px;
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 100px;
background-color: #ccc;
}
.left {
float: left;
width: 100px;
height: 100px;
margin-left: -100%;
position: relative;
left: -110px;
_left: 0;
background-color: orange;
}
.rightright {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-left: -100px;
position: relative;
rightright: -110px;
}

下面再给出一个高度占满全屏的例子：
CSS Code复制内容到剪贴板

<p><!DOCTYPE html>
<html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body, html {
margin: 0px;
}
#header {
background: blue;
height: 100px;
width: 100%;
position: relative; /*父div的位置设置成相对的*/
top: 0;
}
#header #h_menu {
position:absolute;
bottombottom:0;
background:yellow;
width:100%;
height:50px;
}
#middle {
position:absolute;
width:100%;
height:auto;
top: 100px;
bottombottom:50px;
}
.left {
width: 15%; /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/
background: red;
float: left;
height:100%;
}
.rightright {
width: 15%; /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/
height: 100%;
background: pink;
float: rightright;
}
.center {
height: 100%;
background: green;
/*两种方式均可（一）margin(二)margin-left、margin-right*/
/*（一）、用这种方式上面的left和right中的width是百分比或者像素值都可以*/
margin: auto;
/*(二)、这里是百分比或者像素值，对应上面的left、right中的width就是百分比或者像素值*/
/*margin-left:15%;
margin-right:15%;*/
}
#footer {
background: blue;
height: 50px;
width: 100%;
position: absolute;
bottombottom: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
上
<div id="h_menu">
上_底
</div>
</div>
<div id="middle">
<div class="left">
中左
</div>
<div class="right">
中右
</div>
<div class="center">
中间
</div>
</div>
<div id="footer">
下
</div>
</div>
</form>
</body>
</html>
</p>

qq303604905 · 发表于 2022-12-25 03:42:43

66666666666

溪谷小兵 · 发表于 2023-8-10 00:18:23

快更新啊，我擦

70r45_zs · 发表于 2023-8-22 12:42:29

2222222222222222

plvo189 · 发表于 2023-10-13 07:01:07

不错的源码论坛

pwseqn1h · 发表于 2024-1-15 22:51:39

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

0608fv3 · 发表于 2024-3-12 06:10:23

快更新啊，我擦

9jduu05 · 发表于 2024-5-31 04:34:26

女生看了弄丢了卡萨诺的卡洛斯

64000928 · 发表于 2024-6-2 12:52:56

谢谢您的分享！

btbhs8t · 发表于 2024-7-19 04:10:13

呵呵呵呵呵呵

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS实现页面两列布局与三列布局的方法示例

相关帖子