CSS中自适应布局中使用浮动来横向布局的小坑

最新推荐文章于 2024-09-13 23:24:11 发布

呆毛王开饭啦

最新推荐文章于 2024-09-13 23:24:11 发布

阅读量75

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/CYKNB666/article/details/131405692

版权

文章讨论了在自适应布局中，当使用浮动元素进行横向布局时，如果窗口宽度减小，右侧固定宽度的盒子会被挤压消失。为了解决这个问题，文章提出了使用CSS的弹性盒模型（Flexbox）进行布局，这样可以在窗口尺寸变化时保持元素的适当排列，而不会丢失任何盒子。通过将父容器设置为`display:flex`，可以实现响应式布局，确保在不同屏幕尺寸下都能正确显示。

摘要由CSDN通过智能技术生成

当前自适应布局代码为

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		*{
			margin: 0;
			padding: 0;
		}
		html,body {
			width: 100%;
			height: 100%;
		}
		.left,.right{
			width: 200px;
			height: 100%;
		}
		.left {
			background-color: yellow;
			float: left;
		}
		.center {
			width: calc(100% - 400px);
			height: 100%;
			background-color: blue;
			float: left;
		}
		.right {
			background-color: red;
			float: right;
		}
	</style>

</head>
<body>
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</body>
</html>

显示效果如下：

但是使用浮动来横向布局的话，当页面显示窗口宽度低于右侧固定盒子时候会把右侧盒子挤消失了，不论是从左减少宽度还是从右减少宽度。情况如下：

解决方案为将自适应布局的父盒子设置为弹性盒来横向布局，不用浮动横向布局来解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		*{
			margin: 0;
			padding: 0;
		}
		html,body {
			width: 100%;
			height: 100%;
		}
		body {
            /* 将父盒子设置为弹性盒即可解决因为页面显示窗口缩小导致浮动的盒子消失的问题 */
			display: flex;
		}
		.left,.right{
			width: 200px;
			height: 100%;
		}
		.left {
			background-color: yellow;
		}
		.center {
			width: calc(100% - 400px);
			height: 100%;
			background-color: blue;
		}
		.right {
			background-color: red;
		}
	</style>

</head>
<body>
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</body>
</html>

解决效果如下：