前端面试之轻松实现CSS两栏布局的几种方式(实践有效）

最新推荐文章于 2023-05-14 09:05:56 发布

子月吾生

最新推荐文章于 2023-05-14 09:05:56 发布

阅读量1.4k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Sunday97/article/details/91490407

版权

这里实现得两栏布局是左边部分的宽度固定，右边部分的宽度自适应
其效果就如下图，在浏览器屏幕大小变化的过程中，左边块的大小是不变的，右边块的宽度是自适应的。
在这里插入图片描述
实现方法有以下几种：
1通过设置浮动实现。需要两个div实现，一个div设置浮动，并设置宽度，另一个div不用设置任何东西
如果要给右边块设置什么的话下面两种方法也行：

(left左浮动并设置宽度right设置margin-left为left的宽度也能实现）
(left设置左浮动并和宽度right，right设置over-flow:hidden也能实现）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两栏布局——float</title>
	<style>
		div{
			height:300px;
		}
		.left{
			width:200px;
			background-color:gray;
			float:left;
		}
		.main{
			background-color:pink;
			/* margin-left:200px; */
			/* 或者overflow:hidden; */
		}
	</style>
</head>
<body>
	<div class = &#

最低0.47元/天解锁文章

子月吾生

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端面试之轻松实现CSS两栏布局的几种方式(实践有效）

这里实现得两栏布局是左边部分的宽度固定，右边部分的宽度自适应其效果就如下图，在浏览器屏幕大小变化的过程中，左边块的大小是不变的，右边块的宽度是自适应的。实现方法有以下几种：1通过设置浮动实现。需要两个div实现，一个div设置浮动，并设置宽度，另一个div不用设置任何东西如果要给右边块设置什么的话下面两种方法也行：(left左浮动并设置宽度right设置margin-left为lef...
复制链接

扫一扫