CSS中常见自适应布局有哪些

今天将介绍的是CSS中常见的自适应布局，有一定的参考价值，希望对大家有所帮助。接下来在文章中将为大家详细介绍自适应布局的几种方法

【推荐课程：CSS课程】

自适应布局：

方法一

左边固定右边自适应，一般用于移动端Web的列表展示

HTML代码

<div class="box">     <div class="left"></div>     <div class="right"></div>     </div>

 <style type="text/css">     .box{          position: absolute;         width:100%;         height: 100%;     }      .left{             width:200px;             height:100%;             background: pink;             float: left;         }         .right{             width:100%;             height:100%;             background: skyblue;         }     </style>

效果图：

方法二

左边自适应，右边定宽

display:table-cell属性就是让标签元素以表格单元格的形式呈现，类似于td标签，这个属性只适用于目E8浏览器及其以上版本的和其他现代浏览器都是支持此属性的。这个属性的使用为我们的自适应式布局带来就简便

HTML代码：

<div class="box">     <div class="left"></div>     <div class="right"></div>     </div>

实现方法：给父元素设置为table元素再通过display:table-cell完成

.box{     position: absolute;      width:100%;     height: 100%;     display: table;     table-layout: fixed;     } .left {     width: 200px;     height:100%;     display:table-cell;     background: pink;     }  .right {    display: table-cell;    width:100%;    height: 100%;    display: table-cell;      background: skyblue;         }     </style>

效果图：

方法三

两边定宽中间自适应

HTML代码

<div class="box">     <div class="left"></div>     <div class="content"></div>     <div class="right"></div>     </div>

实现方法：flex 属性是用于设置或检索弹性盒模型对象的子元素如何分配空间。

 .box{  position: absolute;  display: flex;  width: 100%;  height: 100%;     }  .left {  width: 200px; height:100%;  float:left; background: pink;} .content{ float: left; height: 100%; flex: 1;  background-color:#f1f19b; } .right {  display: table-cell; width:200px; height: 100%;  float: left; background: skyblue;         }

效果图如下：

总结：以上就是本篇文章的全部内容，希望通过这篇文章可以让大家对自适应布局有一定的了解。

以上就是CSS中常见自适应布局有哪些的详细内容，更多内容请关注技术你好其它相关文章！