用五种不同的布局方式实现“左右300px中间自适应”的效果
2024-08-27 23:42:14
float浮动
<section class="layout float">
<style media="screen">
.layout.float .left{
float: left;
width: 300px;
background: pink;
}
.layout.float .right{
float: right;
width: 300px;
background: lightblue;
}
.layout.float .center {
background: lightyellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1.这是三栏布局中的中间部分
2.这是三栏布局中的中间部分
</div>
</article>
</section>
absolute绝对定位
<section class="layout absolute">
<style media="screen">
.layout.absolute .left-right-center>div {
position: absolute;
}
.layout.absolute .left {
width: 300px;
left: 0;
background: lightblue;
}
.layout.absolute .right {
width: 300px;
right: 0;
background: lightgreen;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: pink;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
2.这是三栏布局的中间部分
</div>
</article>
</section>
flex布局
<section class="layout flexbox">
<style media="screen">
.layout.flexbox .left-center-right {
margin-top: 140px;
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: lightcoral;
}
.layout.flexbox .center {
flex:1;
background: lightgray;
}
.layout.flexbox .center2 {
flex:1; /*按照数字的比例自动分配剩余空间*/
background: lightgreen;
}
.layout.flexbox .right {
width: 300px;
background: lightblue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flex布局解决方案</h1>
3.这是三栏布局的中间部分
</div>
<div class="center2">
<h1>flex布局解决方案</h1>
3.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
table布局
<section class="layout table">
<style>
.layout.table .left-center-right {
width: 100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: lightgreen;
}
.layout.table .center {
background: pink;
}
.layout.table .right {
width: 300px;
background: lightblue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>table解决方案</h1>
4.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
grid网格布局
<section class="layout grid">
<style>
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
.left {
background: lightgreen;
}
.center {
background: pink;
}
.right {
background: lightblue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格布局解决方案</h1>
5.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
最新文章
- 让代码更简单——自定义toBean实现
- A ship is always safe at the shore - but that is not what it is built for.
- Web API应用架构在Winform混合框架中的应用（3）--Winfrom界面调用WebAPI的过程分解
- c#中序列化
- Android 学习笔记之Volley开源框架解析（一）
- 安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案（原创） (2016-10-29 下午01:56)
- 20145305《JAVA程序设计》实验二
- sublime添加ctags实现代码跳转
- Django文档——Model字段类型(Field Types)
- Storm系列(四)Topology提交校验过程
- c#调用js，以及js调用C#里的函数, c#自己生成js代码，实现对web的控制
- wpa_supplicant 配置与应用
- android 53 ContentProvider内容提供者
- Emacs配置erlang开发环境（.emacs 文件）
- javascript正则表达式小数类型
- Shell中的算术运算(译)
- DBProxy 入门到精通系列(二):DBProxy快速入门教程
- ORA-12638: 身份证明检索失败 解决方法
- Linux下导入SQL文件
- [Windows] [VS] [C] [取得指针所指内存的二进制形式字符]