目录
一、单列布局
二、两列自适应布局
一列由内容撑开，另一列撑满剩余宽度的布局方式
三、三列布局
1、圣杯布局
2、飞翼布局
三种方法实现 “双飞翼布局”：
（1）、左右浮动
* {
margin: 0;
padding: 0;
}
.clearfix::after {
content: "";
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden;
}
.top {
height: 100px;
background-color: #aaa;
}
.content {
height: 300px;
}
.middle {
width: 100%;
float: left;
height: 100%;
background-color: #ff0;
padding: 0px 100px;
box-sizing: border-box;
}
.left {
float: left;
margin-left: -100%;
width: 100px;
height: 100%;
background-color: #f00;
}
.right {
float: left;
margin-left: -100px;
width: 100px;
height: 100%;
background-color: #00f;
}
.bottom {
height: 100px;
background-color: #666;
}
// html 中
<body>
<header class="top"></header>
<section class="content clearfix">
<div class="middle">hello world</div>
<div class="left">left</div>
<div class="right">right</div>
</section>
<footer class="bottom"></footer>
</body>（2）、calc() 算法
/* 其余样式，与第一种方法中的一样，恕不复写 */
// ...
.content {
height: 300px;
}
.middle {
float: left;
width: calc(100% - 200px);
height: 100%;
background-color: #ff0;
box-sizing: border-box;
}
.left {
float: left;
width: 100px;
height: 100%;
background-color: #f00;
}
.right {
float: left;
width: 100px;
height: 100%;
background-color: #00f;
}
// ...
// html 中（注意：顺序与第一种方法里的不同）
<body>
<header class="top"></header>
<section class="content clearfix">
<div class="left">left</div>
<div class="middle">hello world</div>
<div class="right">right</div>
</section>
<footer class="bottom"></footer>
</body>（3）、flex
/* 其余样式，与第一种方法中的一样，恕不复写 */
// ...
.content {
height: 300px;
display: flex;
}
.middle {
flex: 1;
width: 100%;
height: 100%;
background-color: #ff0;
box-sizing: border-box;
}
.left {
flex: 0 0 100px;
width: 100px;
height: 100%;
background-color: #f00;
}
.right {
flex: 0 0 100px;
width: 100px;
height: 100%;
background-color: #00f;
}
// ...
// html 中（注意：顺序与第一种方法里的不同）
<body>
<header class="top"></header>
<section class="content clearfix">
<div class="left">left</div>
<div class="middle">hello world</div>
<div class="right">right</div>
</section>
<footer class="bottom"></footer>
</body>四、等高布局
子元素在父元素中高度相等的布局方式。
1.利用正padding+负margin
2.利用背景图片
3.模仿表格布局
4.使用边框和定位
五、粘连布局
六、三足鼎立布局
<div class="list-item" v-for='(item, index) in lists' :key='index'>
<img class="picture" :src="item.headPortrait">
<div class="content">
<div class="title">item.name</div>
<div class="state">itme.isSignIn</div>
<div class="desc">item.time</div>
</div>
</div>.list-item {
padding: 0.24rem 0.32rem;
display: flex; // 关键点
align-items: center;
.cont {
width: 100%;
}
.picture {
width: 0.48rem;
height: 0.48rem;
margin-right: 0.32rem;
object-fit: contain;
object-position: center;
}
.title {
float: left; // 关键点
font-size: 0.34rem;
font-weight: 400;
color: #222A35;
}
.state {
float: right; // 关键点
}
.state, .desc {
font-size: 0.28rem;
font-weight: 400;
color: #999;
}
.desc {
padding-top: 0.5rem; // 关键点
}
}效果见下图：
【参考文档】
扫一扫
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
