页面左边部分固定，右边部分自适应大小（HTML+CSS）

最新推荐文章于 2024-08-03 23:03:36 发布

sinat_38342319

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量650

点赞数

分类专栏：格式文章标签：页面布局 css

本文链接：https://blog.csdn.net/sinat_38342319/article/details/100784921

版权

格式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			padding-left: 300px;
		}
		.panel {
			height: 400px;
			border: 8px solid #ccc;
			border-top: 20px solid #ccc;;
			border-radius: 5px;
			text-align: center;
			background-color: #E2E6C3;
		}
		.panel > .panel-left {
			width: 200px;
			height: 300px;
			float: left;
			background-color: #E6B451;
		}
		.panel > .panel-right {
			margin-left: 200px;
		}
	</style>
</head>
<body>
	<div class="panel">
		<div class="panel-left">左边固定宽度</div>
		<div class="panel-right">右边随着窗口的大小自适应宽度</div>
	</div>
</body>
</html>

中心思想

左边的盒子浮动，设置宽度200px；右边的盒子不浮动，但要给浮动的盒子留出空间，即margin-left设置为200px。

效果图

这样右边的盒子就可以自适应屏幕的大小

这样右边的盒子就可以自适应屏幕的大小。
但如果将下列代码删掉，右边盒子就不能自适应，如下图所示。
注意，在html文档布局中，浮动的盒子一定要写在固定的盒子前面。

.panel > .panel-right {
			margin-left: 200px;
		}

在这里插入图片描述

sinat_38342319

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面左边部分固定，右边部分自适应大小（HTML+CSS）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { padding-left: 300px; } .pane...
复制链接

扫一扫

专栏目录