首页 > 开发 > CSS > 正文

浅析两列自适应布局的3种思路

2024-07-11 08:25:38

字体：大中小

来源：转载

供稿：网友

前面已经介绍过单列定宽单列自适应的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table和flex来介绍两列自适应布局的3种思路。

思路一: float

在单列定宽单列自适应的两列布局中，经常用float和负margin配合实现布局效果。但由于margin取值只能是固定值，所以在两列都是自适应的布局中就不再适用。而float和overflow配合可实现两列自适应效果。使用overflow属性来触发bfc，来阻止浮动造成的文字环绕效果。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器

CSS Code复制内容到剪贴板

<style> p{margin: 0;}
.parent{overflow: hidden;zoom: 1;} .left{float: left;margin-right: 20px;}
.rightright{overflow: hidden;zoom: 1;} </style>

XML/HTML Code复制内容到剪贴板

<div class="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;">
<p>left</p> </div>
<div class="right" style="background-color: lightgreen;"> <p>right</p>
<p>right</p> </div>
</div>

思路二: table

若table元素不设置table-layout:fixed，则宽度由内容撑开。在某个table-cell元素的外层嵌套一层div，并设置足够小的宽度如width:0.1%

CSS Code复制内容到剪贴板

<style> p{margin: 0;}
.parent{display:table;width:100%;} .leftWrap{display:table-cell;width:0.1%;}
.left{margin-right: 20px;} .rightright{display:table-cell;}

上一篇：CSS清除浮动的常用方法优缺点分析

下一篇：深究CSS定位position的常用技法

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注