源码动态 源码评测 源码技巧 网站运营 网页制作 网站开发 安全相关 软件教程 IDC资讯 业界消息
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
当前位置:A5源码 > 资讯报道 > 网页制作 > 详解css布局实现左中右布局的5种方式

详解css布局实现左中右布局的5种方式

作者:zy来源:未知浏览:时间:2018-03-06 15:59我要评论
本文介绍了详解css布局实现左中右布局的5种方式,分享给大家,具体如下。

本文介绍了详解css布局实现左中右布局的5种方式,分享给大家,具体如下:

效果如下:

左中右布局

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

html*{

margin: 0;

padding: 0;

}

article{

height: 100px;

}

section{

margin-top: 10px;

}

.left{

width: 300px;

height: 100px;

background-color: #823384;

text-align: center;

font-size: 20px;

color: #fdf6e3;

}

.center{

height: 100px;

background-color: #d29922;

}

.right{

width: 300px;

height: 100px;

background-color: #0c8ac5;

text-align: center;

font-size: 20px;

color: #fdf6e3;

}

</style>

</head>

<body>

<!--浮动布局--><!--左浮动, 右浮动, 中间自动填充-->

<section class="layout float">

<style>

.float article div{ }

.float article .left{ float: left; }

.float article .right{ float: right; }

.float article .center{ }

</style>

<article class="left-right-center">

<div class="left">左边</div>

<div class="right">右边</div>

<div class="center">

<h1>浮动float布局:</h1>

左元素: float: left;

右元素: float: right;

中间元素:自动填充</div>

</article>

</section>

<!--绝对定位-->

<section class="layout absolute">

<style>

article{

position: relative;

}

.absolute .left-center-right div{

position: absolute;

}

.absolute .left-center-right .left{

left: 0;

}

.absolute .left-center-right .center{

left: 300px; right: 300px;

}

.absolute .left-center-right .right{

right: 0;

}

</style>

<article class="left-center-right">

<div class="left">左边</div>

<div class="center">

<h1> 绝对absolute定位布局: </h1>

左边元素: position: absolute; left: 0;

右边元素: position: absolute; right:0;

中间元素: position: absolute;left:300px; right: 300px;

</div>

<div class="right">右边</div>

</article>

</section>

<!--flex布局-->

<section class="layout flexbox">

<style>

.flexbox .left-center-right{ display: flex; }

.flexbox .left-center-right .left{ }

.flexbox .left-center-right .center{ flex:1; }

.flexbox .left-center-right .right{ }

</style>

<article class="left-center-right">

<div class="left">左边</div>

<div class="center">

<h1> flex布局: </h1>

父元素display:flex;

左右子元素设置宽度300px; 中间子元素设置flex:1;

</div>

<div class="right">右边</div>

</article>

</section>

<!--表格布局-->

<section class="table-box layout">

<style>

.table-box .left-center-right{ width: 100%; display: table; }

.table-box .left-center-right>div{ display: table-cell; }

.table-box .left-center-right .left{ }

.table-box .left-center-right .center{ }

.table-box .left-center-right .right { }

</style>

<article class="left-center-right">

<div class="left">左边</div>

<div class="center">

<h1> 表格table布局: </h1>

父元素width: 100%;

display: table;

左右子元素display: table-cell;

width: 300px;

</div>

<div class="right">右边</div>

</article>

</section>

<!--网格布局-->

<section class="grid layout">

<style>

.grid article{

display: grid;

width: 100%;

grid-template-rows: 100px;

grid-template-columns: 300px auto 300px;

}

</style>

<article class="left-center-right">

<div class="left">左边</div>

div class="center">

<h1> 网格grid布局: </h1>

父元素宽度为100%, 父元素width: 100%;

display:grid;

grid-template-rows: 100;

grid-template-columns: 300px auto 300px

</div>

<div class="right">右边</div>

</article>

</section>

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关文章
网友对“详解css布局实现左中右布局的5种方式”的评论
资讯分类
本类热门资讯
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话