三列布局

最新推荐文章于 2021-04-27 13:37:03 发布

qq_42164670

最新推荐文章于 2021-04-27 13:37:03 发布

阅读量249

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_42164670/article/details/88958474

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

方法一：flex

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.container{
				display: flex;
				min-height: 300px;
			}
			.main{
				flex-grow: 1;/* //flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
				background-color: #5F9EA0;
			}
			.left{
				order: -1;/* //order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */
				flex-basis: 200px;
				background-color: #FAEBD7;
			}
			.right{
				flex-basis: 300px;
				/* //flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
				//浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 */
				background-color: #7FFFD4;
			}
		</style>
	</head>

	<body>
		<div class="container clearfix">
			<div class="main">main</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>

方法二：float+margin

<style type="text/css">
			/* 不考虑主体middle一定要放在最前面进行渲染
            1、使用float+margin */
			/*float布局,注意中间的middle不要设为width:100%,否则右边的margin会被挤到视窗外面，div元素本身默认是占满整个父元素的宽度的，
			如果设了margin或者padding就会自动缩小width让出margin和padding的空间*/
	.left-01 {
		float: left;
		background-color: red;
		width: 150px;
		height: 50px;
	}

	.right-01 {
		float: right;
		background-color: yellow;
		width: 200px;
		height: 50px;
	}

	.middle-01 {
		margin: 0 200px 0 150px;
		background-color: #fff9ca;
		height: 50px;
	}
		</style>
	</head>

	<body>

		<div>
			<div class="left-01"><span>div-left</span></div>
			<div class="right-01"><span>div-right</span></div>
			<!--根据float对后面元素的影响，主元素要放在文档流最后-->
			<div class="middle-01"><span>div-middle</span></div>
		</div>
	</body>

方法三：使用BFC原理，将middle设为overflow: hidden；

.left-01 {
	float: left;
	background-color: red;
	width: 150px;
	height: 50px;
}

.right-01 {
	float: right;
	background-color: yellow;
	width: 200px;
	height: 50px;
}

.middle-01 {
	overflow: hidden;
	background-color: #fff9ca;
	height: 50px;
}

方法四：圣杯布局

<style type="text/css">
			/* 二、主体middle一定要放在最前面进行渲染，使用圣杯/双飞翼 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，
			也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。 
			不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
			圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，
			将左右两个div用相对布局position: relative并分别配合right和left属性，
			 以便左右两栏div移动后不遮挡中间div。 双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，
			 在该子div里用margin-left和margin-right为左右两栏div留出位置。 多了1个div，少用大致4个css属性
			（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；
			 而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。 */
			* {
				margin: 0;
				padding: 0;
			}

			.clearfix:after {
				content: '';
				display: block;
				clear: both;
			}

			/* .main,.left,.right{
				position: relative;
				min-height: 130px;
				float: left;
			}
			.left{
				width: 200px;
				margin-left: -100%;
				left: -200px;
				background-color: aquamarine;
			}
			.right{
				width: 300px;
				margin-left:-300px ;
				right: -300px;
				background-color: #FAEBD7;
			}
			.main{
				width: 100%;
				background-color: cadetblue;
			}
			.container{
				padding: 0 300px 0 200px;
			} */
			.container {
				padding: 0 310px 0 210px;
			}

			.main,
			.left,
			.right {
				position: relative;
				float: left;
				height: 300px;
			}

			.main {
				width: 100%;
				background-color: #FAEBD7;
			}

			.left {
				width: 200px;
				margin-left: -100%;
				left: -210px;
				background-color: aquamarine;
			}

			.right {
				width: 300px;
				margin-left: -300px;
				right: -310px;
				background-color: cadetblue;
			}
		</style>
	</head>

	<body>
		<div class="container clearfix">
			<div class="main">main</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>

方法五：双飞翼模式

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.clearfix:after {
				content: '';
				display: block;
				clear: both;
			}
			.main, .left, .right{
				min-height: 300px;
				float: left;
				text-align: center;
			}
			.left{
				margin-left: -100%;
				width: 200px;
				background-color: #5F9EA0;
			}
			.right{
				margin-left: -300px;
				width: 300px;
				background-color: #FAEBD7;
			}
			.main{
				width: 100%;
				background-color: #7FFFD4;
			}
			.content{
				margin: 0 300px 0 200px;
			}
		</style>
	</head>

	<body>
		<div class="container clearfix">
			<div class="main">
				<div class="content">main</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>

qq_42164670

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三列布局

方法一：flex<style type="text/css"> * { margin: 0; padding: 0; } .container{ display: flex; min-height: 300px; } .main{ flex-grow: 1;/* //flex-grow属性定义项目的放大比例，默认为...
复制链接

扫一扫

专栏目录