Html布局左右宽度固定中间自适应解决方案
文章主要介绍了详解左右宽度固定中间自适应html布局解决方案的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 a.使用浮动布局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布局左右宽度固定中间自适应解决方案的全部内容,希望对大家的学习有所帮助。
-
HTML中两个tabs导航冲突问题的解决方法
文章主要介绍了HTML中两个tabs导航冲突问题的解决方法,需要的朋友参考下吧先来一个问题描述吧:在同一个页面,两个tabs一个要float:left,一个要flaot:right,就产生了冲突;原因...
-
html中Position属性值介绍和position属性四种用法
文章主要介绍了html中 position用法,文中逐一给大家介绍了position的四个属性值,感兴趣的朋友跟随小编一起看看吧position的四个属性值:1.relative
2.absolute
3.fixed
4.stati... -
HTML 使用表单标签实现注册页面的实例代码
文章主要介绍了HTML 使用表单标签实现注册页面的实例代码,需要的朋友可以参考下案例说明: - 使用表格实现页面效果
- 超链接不想要有效果,使用href="#"
- 如果表格里面的... -
Html网页中meta标签及用法详解
<meta> 元素 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。...
-
一张图看懂HTML5的前端性能优化
最近1个月一直在设计HTML5相关的产品,没错,主要是用于微信的,虽然很多情况下,HTML5页面的设计类似于APP,但是由于是网页性的东西,对移动网络带宽和浏览器性能,CPU,GP...
-
YouTube默认HTML5视频播放技术 或引发流媒体视频终端升级风暴
近日,YouTube工程总监RichardLeider发文写道,在Chrome、IE11、Safari8和beta版Firefox浏览器中,YouTube已默认采用HTML5技术播放视频。
他说,4年前YouTube开始尝试HTML5技术,当... -
图解Excel与Html格式之间的互相转换
在工作中时常会遇到转换的问题,比如在浏览网站的时候看到一个不错的表格,但这个表格是网页上面的,该网站又不提供下载,这个时候该如何将这个表格下载下来,并且完整的将其转换到Excel中呢?下面8844就为你介绍如何将Html...