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

发布时间：2020-03-13 21:19:39 所属栏目：系统来源：站长网

导读：这篇文章主要介绍了CSS实现页面两列布局与三列布局的方法示例,包括宽度与高度的自适应的示例,需要的朋友可以参考下

1. 使用BFC的原理实现
BFC的规则之一，就是BFC区域，不会与float box重叠，因此我们可以利用这一点来实现3列布局。
html代码如下

XML/HTML Code复制内容到剪贴板

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>

</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;

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/5

尾页