两列布局

最新推荐文章于 2022-05-25 15:03:17 发布

无悟饭空

最新推荐文章于 2022-05-25 15:03:17 发布

阅读量268

点赞数

分类专栏： html和css # 布局

本文链接：https://blog.csdn.net/weixin_43269800/article/details/103878654

版权

html和css 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

布局

9 篇文章 0 订阅

订阅专栏

一列定宽，另一列自适应。
思路：
左边容器float：left；设置width；
右边容器开启BFC；

	<body>
		<div id="left">left</div>
		<div id="right">right</div>
	</body>

*{
	margin: 0;
	padding: 0;
}
div{
	height: 200px;
}
#left{
	width: 200px;
	background: pink;
	float: left;
}
#right{
	background: deeppink;
     overflow: hidden;
}

两列布局误区：

因为左边开启浮动后，半脱离文档流，右边里面的文本不会被左边遮挡。
很多人误以为右边不用开启BFC也是两列布局。

无悟饭空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
两列布局

一列定宽，另一列自适应。思路：左边容器float：left；设置width；右边容器开启BFC； <body> <div id="left">left</div> <div id="right">right</div> </body>*{ margin: 0; padding: 0;}div{ ...
复制链接

扫一扫