网站建设   网站建设技术   网页设计   html/css  

flex布局案例实现两边对齐,自动间距分配

人浏览  发布时间:2021-10-26

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style type=text/css .tabs .tabs-title { display: flex; padding:3px; background:#666; justify-content: space-between; } .tabs { margin: auto; width: 640px; height: auto; } .tabs .tabs-title .title-item { display: flex; background:#096 } /style /head body div class=tabs div class=tabs-title div class=title-item首页/div div class=title-item首页/div div class=title-item首页/div div class=title-item首页/div /div /div /body /html 结果:...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.tabs .tabs-title {
display: flex;
padding:3px;
background:#666;
justify-content: space-between;
 
}
.tabs {
margin: auto;
width: 640px;
height: auto;
}
.tabs .tabs-title .title-item {
 
display: flex;
background:#096
}
</style>
</head>
 
<body>
<div class="tabs">
<div class="tabs-title">
<div class="title-item">首页</div>
<div class="title-item">首页</div>
<div class="title-item">首页</div>
<div class="title-item">首页</div>
 
</div>
 
</div>
</body>
</html>
结果:
 
点击浏览下载讲义资料
(编辑:360°搜索建站)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:广东省深圳市宝安区西乡街道东方商务大厦 WebDesign ©2012 Corporation 360°搜索建站网 网站地图