本文介绍了两种网页布局方法：一是使用Flexbox实现元素居中对齐，通过设置`display:flex`和`align-items:center`实现；二是利用表格布局`display:table`，结合`calc()`函数计算宽度，确保元素在页面上的适配和排列。
方法一：用flex来实现
Document*{
margin:0;
padding:0;
}
body{
font-size:14px;
padding:15px;
}
.demo{
overflow: hidden;
display: flex;
align-items: center;
}
.demo span{
display: inline-block;
}
.name{
width:50px;
}
.sex{
width:25px;
}
.card{
flex:1;
}
姓名姓名姓名姓名姓名姓名
男
证件号码445544555544558887
方法二：display:table
Document*{
margin:0;
padding:0;
}
body{
font-size:14px;
padding:15px;
}
.demo{
overflow: hidden;
display: table;
}
.demo span{
display: table-cell;
vertical-align: middle;
}
.name{
width:50px;
}
.sex{
width:25px;
}
.card{
width:calc(100% - 50px -25px);
}
姓名姓名姓名姓名姓名姓名
男
证件号码445544555544558887
欢迎关注小程序，感谢您的支持！
扫一扫
931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
