css 五种两边固定，中间自适应的实现方式

最新推荐文章于 2024-04-11 00:14:29 发布

南北北南

最新推荐文章于 2024-04-11 00:14:29 发布

阅读量734

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/c_lam_e/article/details/106072681

版权

<!DOCTYPE html>
<html>
	<head>
		<title>BFC</title>
		<style>
			body {
				overflow: scroll;
			}
			
			/* position:absolute */
			.left, .right {
				position: absolute;
				width: 230px;
				top: 0;
				height: 50px;
				background-color: blue;
			}
			.left {
				left: 0;
			}
			.right {
				right: 0;
			}
			.main {
				margin: 0 230px;
				height: 50px;
				background-color: blueviolet;
			}

			/* float */
			#content2 {
				margin-top: 30px;
				width: 100%;
			}
			#left1 {
				float: left;
				width: 230px;
				background-color: blue;
				height: 50px;
			}
			#right1 {
				float: right;
				width: 230px;
				background-color: blue;
				height: 50px;
			}
			#main1 {
				background-color: blueviolet;
				height: 50px;
			}

			/* display:table */
			#content3 {
				display: table;
				margin-top: 40px;
				width: 100%;
				height: 50px;
			}
			#left2 {
				display: table-cell;
				width: 230px;

最低0.47元/天解锁文章

南北北南

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 五种两边固定，中间自适应的实现方式

<!DOCTYPE html><html> <head> <title>BFC</title> <style> body { overflow: scroll; } /* position:absolute */ .left, .right { position: absolute; width: 230px; top: 0; height: 50px.
复制链接

扫一扫