最近翻看了之前的一些面经,发现之前的一些问题并没有得到根本的解决,赶紧补习一下;
这里我介绍两种方法:
- 最推荐的一种,也是自己用的比较多的一种方法 flex布局法:首先在总的父级元素上设置一个display: flex;属性。然后给定左右两个元素的宽高,中间元素设置flex:1;这样就可以完美实现自适应三联列(里面的三个div分别是左 中 右)
<!-- 1.利用flex 父级元素设置display: flex; 中间元素设置flex:1; -->
<div class="allblock" style="display: flex; width: 100%;height: auto; ">
<div style="width: 200px;height: 500px;background-color: red;">1</div>
<div style="flex: 1;background-color: yellow;">2</div>
<div style="width: 200px;height: 500px;background-color:red ;">3</div>
</div>
这种方法的缺点除了对于古老的浏览器有一些兼容性的问题以外,没有任何缺点 代码简单