两栏布局和三栏布局

本文主要是介绍两栏布局和三栏布局，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

两栏布局

//html
<div class="wrapper">
	<div class="left">
		    左边固定宽度，高度不固定
	</div>
	<div class="right">
		    这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。
	</div>
</div>

1.grid

//css
.wrapper {
	padding: 15px 20px;
	border: 1px dashed #ff6c60;
	display: grid;
	grid-template-columns:120px 1fr;
	align-items: start;
}
.left {
	width: 120px;
	border: 5px solid #ddd;
	box-sizing: border-box;
	grid-column:1;
}
.right {
	margin-left: 20px;
	border: 5px solid #ddd;
	box-sizing: border-box;
	grid-column:2;
}

2.flex

.wrapper {
	padding: 15px 20px;
	border: 1px dashed #ff6c60;
	display: flex;
}
.left {
	width: 120px;
	border: 5px solid #ddd;
	box-sizing: border-box;
}
.right {
	margin-left: 20px;
	border: 5px solid #ddd;
	box-sizing: border-box;
	flex:1;
}

3.absolute

.wrapper {
	 padding: 15px 20px;
	 border: 1px dashed #ff6c60;
	 position: relative;	
}
.left {
	 width: 120px;
	 border: 5px solid #ddd;
	 box-sizing: border-box;
	 position: absolute;
	 left: 0;
}
.right {
	 margin-left: 20px;
	 border: 5px solid #ddd;
	 box-sizing: border-box;
	 position: absolute;
	 left: 120px;
	 right: 0;
}

4.float

.wrapper {
	padding: 15px 20px
	border: 1px dashed #ff6c60;
	/*overflow: hidden;*/
	overflow: auto; 
}
.left {
	width: 120px;
	border: 5px solid #ddd;
	box-sizing: border-box;
	float: left;
}
.right {
    margin-left: 140px;
	border: 5px solid #ddd;
	box-sizing: border-box;
}

三栏布局

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

float

.left{
   float: left;
   background-color: red;
   width: 150px;
   height: 50px;
}
.right{
   float: right;
   background-color: yellow;
   width: 200px;
   height: 50px;
}
.middle{
   margin: 0 200px 0 150px;
   background-color: #fff9ca;
   height: 50px;
}

2.flex

//html
<div class="parent">
    <div class="left"><span>div-left</span></div>
    <div class="middle"><span>div-middle</span></div>
    <div class="right"><span>div-right</span></div>
</div>
//css
.parent{
    display: flex;
}
.left{
    background-color: red;
    width: 150px;
    height: 50px;
}
.right{
    background-color: yellow;
    width: 200px;
    height: 50px;
}
.middle{
    flex: 1;
    background-color: #fff9ca;
    height: 50px;
}

圣杯布局

//html
<!-- 主元素要放在文档流最前面-->
<div class="box">
	<div class="center">center</div>
	<div class="left">left</div>
	<div class="right">right</div>	
</div>
//css
.box{
   padding:  0 100px; /*留出左右的距离*/
   height: 100px;
}
.center{
   float: left;
   width: 100%;
   height: 50px;
   background-color: yellow;         
}
.left{
   float: left;
   width: 100px;
   margin-left: -100%;
   height: 50px;
   background-color: red;
   position: relative;
   left: -100px;/*往左拉*/
}
.right{
   float: left;
   width: 100px;
   height:50px;
   margin-left: -100px;
   background-color: green;
   position: relative;
   right: -100px;/*往右拉*/
}

双飞翼布局

//html
<div class="box">
    <div class="middle-wrap">
        <div class="middle"><span>div-middle</span></div>
     </div>
    <div class="left"><span>div-left</span></div>
    <div class="right"><span>div-right</span></div>
</div>
//css
 .middle-wrap {
    float: left;
    width: 100%;
    height: 50px;
    background-color: yellow;
}
.middle-wrap .middle{
    height: 50px;
    margin: 0 100px; /*留出距离*/
    background-color: yellow;
}
.left{
   float: left;
   width: 100px;
   margin-left: -100%;
   height: 50px;
   background-color: red;
}
.right{
   float: left;
   width: 100px;
   height:50px;
   margin-left: -100px;
   background-color: green;
} 

这篇关于两栏布局和三栏布局的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！