详解左右宽度固定中间自适应html布局解决方案
本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下:
a.使用浮动布局
html结构如下
<div class="box"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </div> //此处注意要先渲染左、右浮动的元素才到中间的元素。元素浮动后剩余兄弟块级元素会占满父元素的宽度 <style> .box{ height:200px; } .left{ float:left; width:300px; } .right{ float:right; width:300px; } </style>
b.使用固定定位
html结构如下
<div class="box"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </div> //和浮动布局同理,先渲染左右元素,使其定位在父元素的左右两端,剩余的中间元素占满父元素剩余宽度。 <style> .box{ position: relative; } .left{ position: absolute; width: 100px; left: 0; } .right{ width:100px; position: absolute; right: 0; } .center{ margin: 0 100px; background: red; } </style>
c.表格布局
将父元素display:table,子元素display:table-cell,会将它变为行内块。
这种布局方式的优点是兼容性好。
<div class="box"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </div> <style> .box{ display: table; width: 100%; } .left{ display: table-cell; width: 100px; left: 0; } .right{ width:100px; display: table-cell; } .center{ width: 100%; background: red; } </style>
d.弹性布局
父元素display:flex子元素会全部并列在一排。
子元素中flex:n的宽度会将父元素的宽度/n
如flex:1,宽度就等于父元素高度。
弹性布局的缺点是兼容性不高,目前IE浏览器无法使用弹性布局
<div class="box"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </div> <style> .box{ display: flex; width: 100%; } .left{ width: 100px; left: 0; } .right{ width:100px; } .center{ flex:1; } </style>
e.网格布局
父元素display:grid;
grid-templatecolumns:100px auto 100px;
依次为第一个子元素宽100px 第二个自适应 第三个100px;
网格布局的优点是极为简便,直接通过父元素样式决定,缺点是兼容性不高。
<div class="box"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </div> <style> .box{ display: grid; grid-template-columns: 100px auto 100px; width: 100%; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
上一篇:html form表单input使用disabled后提交不能获取表单值的解决方法
栏 目:CSS/HTML
下一篇:HTML网页中插入视频的方法小结
本文地址:https://www.xiuzhanwang.com/a1/CSS_HTML/9507.html
您可能感兴趣的文章
- 01-10html借助marquee实现文字左右滚动
- 01-10HTML表格布局实际使用详解
- 01-10HTML cellpadding与cellspacing属性图文详解
- 01-10详解HTML编程的标记与文档结构
- 01-10详解HTML的&lt;input&gt; 标签及其禁用方法
- 01-10详解HTML的style标签以及相关的CSS引用
- 01-10关于html的下载功能详解
- 01-10详解HTML/XHTML中img图像标签的基本用法
- 01-10详解XHTML中的标题标签与段落标签的使用
- 01-10详解html中background-image属性的设置
阅读排行
本栏相关
- 04-02表格样式css样式,css样式表单
- 04-02好看的字体样式css,好看的字体样式图
- 04-02分页样式css,分页样式jq
- 04-02分页样式css,分页样式栏里用来定义首
- 04-02css样式的引入,css样式怎么引入
- 04-02css滚动条样式,css滚动条的样式
- 04-02css样式引入方式有几种,网页引入css样
- 04-02html中加入css样式的简单介绍
- 04-02vue中的css样式布局,vue添加css样式
- 04-02内嵌样式css,内嵌样式表,内部样式表
随机阅读
- 08-05dedecms织梦模板编辑文档的同时自动更
- 01-10C++ 类访问控制的条件总结
- 08-05织梦dedecms首页调用缩略图为背景
- 01-10vue实现分页加载效果
- 08-05DEDECMS点击主栏目默认显示第一个子栏
- 01-10C语言打印杨辉三角示例汇总
- 01-11常用的HTML富文本编译器UEditor、CKEdi
- 01-10bat批处理彻底隐藏文件的方法(使用
- 01-10C++实现将数组中的值反转
- 08-05dedecms织梦模板全站调用收藏数的方法