如何实现左侧200px, 右侧自适应呢? css

最新推荐文章于 2023-10-13 17:31:39 发布

一染星辰

最新推荐文章于 2023-10-13 17:31:39 发布

阅读量382

点赞数

分类专栏：复习p1阶段

本文链接：https://blog.csdn.net/weixin_59519449/article/details/121617941

版权

CSS布局左浮动弹性盒模型 HTML 前端开发

关键词由CSDN通过智能技术生成

复习p1阶段专栏收录该内容

3 篇文章 0 订阅

订阅专栏

思路：

方法一：

给同级一个左浮动,其次给自己一个：margin -left:210px即可：

方法二：

给父节点一个弹性盒子 display:flex

其次： flex-grow: 1;让其站起来

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				height: 300px;
				background-color: #00FFFF;
				/* 方法二 */
				display: flex;
			}
			.left{
				/* 方法一 */
				/* float:left ; */
				width: 200px;
				height: 200px;
				background-color: #7FFF00;
			}
			.right{
				/* margin-left: 210px; */
				height: 200px;
				background-color: deepskyblue;
				flex-grow: 1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left"></div>
			<div class="right"></div>
			
		</div>
		
		
		
		
		
	</body>
</html>