css 多列布局:定宽+自适应使用float+overflow (左侧固定+右侧自适应)

原创于 2018-11-29 20:00:05 发布 · 305 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css float overflow 固定自适应

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

布局

13 篇文章

订阅专栏

本文介绍了一种使用float和overflow属性实现的网页布局技巧，左侧为固定宽度，右侧内容自适应。通过脱离文本流并设置右侧内容溢出隐藏，达到美观且实用的多列布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多列布局:定宽+自适应</title>
		<!-- 使用float+overflow 
		左侧固定+右侧自适应
		-->
		<!-- 通过将左边框脱离文本流,设置右边,当内容溢出元素框时,隐藏 -->
		<style type="text/css">
			.left{
				float: left;
				width: 100px;
				height: 100px;
				margin-right: 20px;
				background-color: aqua;
			}
			.right{
				display: flex;
				justify-content: center;
				overflow: hidden;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="left">
				<p>我在左边</p>
			</div>
			<div class="right">
				<p>我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边我在右边</p>
			</div>
		</div>
		
	</body>
</html>