html 图片左中右排列,详解css布局实现左中右布局的5种方式
本文介绍了详解css布局实现左中右布局的5种方式，分享给大家，具体如下：
效果如下：
左中右布局
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Document
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;
}
.float article div{
}
.float article .left{
float: left;
}
.float article .right{
float: right;
}
.float article .center{
}
浮动float布局:
左元素: float: left; 右元素: float: right; 中间元素:自动填充
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;
}
绝对absolute定位布局:
左边元素: position: absolute; left: 0;
右边元素: position: absolute; right:0; 中间元素: position: absolute;left:300px; right: 300px;
.flexbox .left-center-right{
display: flex;
}
.flexbox .left-center-right .left{
}
.flexbox .left-center-right .center{
flex:1;
}
.flexbox .left-center-right .right{
}
flex布局:
父元素display:flex; 左右子元素设置宽度300px; 中间子元素设置flex:1;
.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 {
}
表格table布局:
父元素width: 100%; display: table;
左右子元素display: table-cell; width: 300px;
.grid article{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
网格grid布局:
父元素宽度为100%,
父元素width: 100%; display:grid; grid-template-rows: 100; grid-template-columns: 300px auto 300px
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
html 图片左中右排列,详解css布局实现左中右布局的5种方式相关推荐
- 详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式 在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存 将要存储的数据使用以下方法放入缓存 wx.setStorag ...
- 详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
- 详解CSS float属性
转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08 | In CSS | 5条评 ...
- inline-block是html5,详解CSS display:inline-block的应用
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
- 详解CSS display:inline-block的应用（转）
详解CSS display:inline-block的应用 阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-blo ...
- float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
- 拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- python二维图颜色函数_通过python改变图片特定区域的颜色详解
通过python改变图片特定区域的颜色详解 首先让我祭出一张数学王子高斯的照片,这位印在德国马克上的神人有多牛呢? 他是近代数学的奠基人之一,与牛顿, 阿基米德并称顶级三大数学家,随便找一个编程语言的 ...
- 详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
- Java递归求全排列详解
Java递归求全排列详解 推荐博客: 博客园Java全排列递归算法,结尾的解释很形象了 csdn的大佬写的,和我下面的代码思路基本一致 全排列的递归思想解释: 全排列的数学定义就不再过多解释,考虑递归 ...
最新文章
- (转)小小的研究了一下linux下的”注册表“ gconf-editor
- 深度学习模型大合集：GitHub 趋势榜第一，已斩获 8000+ 星
- 深度学习 《BiRNN》
- 爬虫之操作excel
- java工程师面试经典题目整理
- Linux环境编程：fork系统调用及其陷阱 - 内存复用，文件不复用
- 在线邮箱地址提取工具
- C语言计算高精度圆周率pi程序的代码
- Drupal 在Views 中自定义筛选 Filter
- 沙龙回顾 | 爱盈利运营小咖秀干货系列沙龙之微软站
- 华为机试真题 C++ 实现【最大化控制资源成本】【100%通过率】【2022.11 Q4 新题】
- Unity异常退出日志存储位置
- xunsearch使用流程
- 显示控件——图标类之图标旋转
- 邹小强老师的个人目标管理分享课
- 未转变者服务器3.26物品id,Unturned未转变者3.21版本物品ID代码汇总
- Chatbot 分类
- 阅读、仔细阅读、反复阅读每个开源框架自带的reference
- 如何添加在线QQ咨询？
- 详细讲解 “双评价”——建设指向的土地资源评价