中间固定，两边自适应的三列布局、两边固定，中间自适应的三列布局、左侧栏固定，右侧自适应的两列布局

最新推荐文章于 2021-11-28 00:32:42 发布

judas_jia

最新推荐文章于 2021-11-28 00:32:42 发布

阅读量614

点赞数

分类专栏： html CSS 文章标签： css html

本文链接：https://blog.csdn.net/judas_jia/article/details/52599203

版权

html 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

分享几个典型的布局，主要是因为最近找工作，这三个都是在笔试题中出现的，接下来分享一下我的实现方式

（1）中间固定，两边自适应的三列布局

<html>
<head>
<style type="text/css">
*{ margin:0; padding:0; }
/*中间固定，两边自适应*/
.middle{background-color: palegreen;position: absolute;left: 50%;margin-left: -250px; width:500px; height:100%; width:500px; }
.left{background-color: gold;position: absolute;left: 0;right: 50%;margin-right: 250px; height:100%;}
.right{background-color: firebrick;position: absolute;right: 0;left: 50%;margin-left: 250px; height:100%;}
</style>
</head>
<body>
 	
    <div class="left">qwkqjijwoqd</div><!--左-->
	<div class="right">hqiu111</div><!--右-->
    <div class="middle"><p>jwqjwqiodjeeeeeeee</p></div><!--中-->
</body>


</html>

运行截图：

（2）两边固定，中间自适应的三列布局

<html>
<head>
<style type="text/css">
*{ margin:0; padding:0; }
/*两边固定，中间自适应*/
.middle{ height:100%; background-color:#CC9999; margin-left:400px; margin-right:300px;}
.left{ background-color:#00FF00; height:100%; float:left; width:400px; }
.right{ background-color:#FF0000;  float:right; height:100%; width:300px; }
</style>
</head>
<body>
<!--两边固定，中间自适应-->
	<div class="left">
		qeeeeeeeeeeeeeeeeeee
	</div>

	<div class="right">
		qeeeeeeee
	</div>
	<div class="middle">
		asdkhihfewi
	</div>   

</body>


</html>

运行截图：

（3）左侧栏固定，右侧自适应的两列布局

<html>
<head>


</head>

<body>
<style type="text/css">
	*{ margin:0; padding:0; } 
	.box{ width:800px; height:600px; }
	.left{ float:left; width:200px; height:100%; background-color:red; }
	.right{ width:auto; height:100%; background-color:#0f0; margin-left:-200px; }
</style>

<div class="box" >
	<div class="left" ></div>
	<div class="right" >wjhjfk</div>

</div>


<body>


</html>

运行截图：