3列布局两边固宽中间自适应

最新推荐文章于 2022-07-22 09:05:20 发布

ilvseyinfu

最新推荐文章于 2022-07-22 09:05:20 发布

阅读量271

点赞数

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/qq_31751569/article/details/78131127

版权

Web 专栏收录该内容

19 篇文章

订阅专栏

		body{margin:0;padding: 0 }
		.left{
			width: 200px;
			position: absolute;
			height: 500px;
			background-color: pink;
			left: 0;
			top: 0;
		}
		.right{
			width: 200px;
			position: absolute;
			height: 500px;
			background-color: pink;
			right: 0;
			top: 0;
		}	
		.content{
			background-color: #f0f3f9;
			height: 500px;
			margin: 0 210px 0 210px; 
		}	
	
	</style>
	<body>
		<div class="left"></div>
		<div class="content">中间部分自适应</div>
		<div class="right"></div>

	</body>

所以说margin-left 相对于一个没有脱离文档流的最近元素进行定位,如果两个都是浮动元素，右边会相对左边的浮动元素进行定位

		<div style="float:left">1</div>
		<div style="margin-left:200px">2</div>
		<div style="margin-left:200px">3</div>
		<br>
		<div style="float:left;">4</div>
		<div style="float:left;margin-left:200px">5</div>
		<br>

		<small>3</small>
		<small style="margin-left:200px">4</small>