CSS 一行两列

🌙
手机阅读
本文目录结构
axihe

二列固定宽度

<div id="left">左列</div>
<div id="right">右列</div>

CSS:

/*2列固定宽度*/
#left{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 300px;
        height: 300px;
        float: left;
}

#right{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 300px;
        height: 300px;
        float: left;
}

效果图:

二列自适应宽度


<div id="left-self-adaption">左列</div>
<div id="right-self-adaption">右列</div>

CSS:

#left-self-adaption{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 20%;
        height: 300px;
        float: left;
}

#right-self-adaption{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 70%;
        height: 300px;
        float: left;
}

左栏设置宽度为 20%,右栏设置宽度为 70%,看上去就像一个左侧为导航,右侧为内容区的常见网页布局形式。 效果图:


第二种

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

.left{
    width:20%;
    height: 500px;
    float: left;
    background:#333;
}
.right{
    width:80%;
    height:500px;
    float: left;
    background: pink
}

左侧固定,右侧宽度自适应

<div id="left-right-self-adaption">左列</div>
<div id="right-right-self-adaption">右列</div></div>

CSS:

/*2列右宽度自适应*/
#left-right-self-adaption{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 100px;
        height: 300px;
        float: left;
}

#right-right-self-adaption{
        background-color: #cccccc;
        border: 2px solid #333333;
        height: 300px;
}

效果图:

二列固定宽度居中

<div id="layout-new-center">
    <div id="left-center">左列</div>
    <div id="right-center">右列</div>
</div>

CSS:

#layout-new-center{
        margin: 0px auto;
        width: 408px;
}

#left-center{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 200px;
        height: 300px;
        float: left;
}

#right-center{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 200px;
        height: 300px;
        float: left;
}

效果图:


顶部定高和左侧定宽,右侧自适应

1. 定位

父元素相对定位,左侧 left 绝对定位确定自适应高度并左对齐。右侧 right 通过绝对定位自适应高度和宽度

.body{
    height: 100%;
    position: relative;
    background-color: #F5F7F9;
  }
  .header{
    height: 80px;
    background-color: #515A6E;
  }
  .section{
    background-color: #F5F7F9;
    position: absolute;
    left: 0;
    top: 80px;
    bottom: 0;
    right: 0;
  }
  .left{
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
  }
  .right{
    background-color: #F5F7F9;
    position: absolute;
    top: 0;
    left: 100px;
    bottom: 0;
    right: 0;
  }

2. float + margin

左侧 left 使用浮动,浮动元素半脱离文档流,与近邻元素位置重叠但不会与邻近元素内部文档重叠

.body{
  height: 100%;
  position: relative;
}
.header{
  height: 80px;
  background-color: #515A6E;
}
.section{
  background-color: #afc7de;
  position: absolute;
  left: 0;
  top: 80px;
  bottom: 0;
  right: 0;
}
.left{
  background-color: #fff;
  float: left;
  width: 100px;
  height: 100%;
}
.right{
  background-color: #F5F7F9;
  height: 100%;
  margin-left: 100px;
}

3. BFC 布局

左浮动,右产生 BFC,利用 BFC 与 float 元素重叠的特征

4. flex 布局

flex-direction: column 布局自上而下,flex:1 让 section 布满除 header 外的所有区域。section 设置 flex,默认从左往右排列,flex:1 让 right 布满除 left 外的所有区域

.body{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header{
  height: 80px;
  background-color: #515A6E;
}
.section{
  background-color: #afc7de;
  flex: 1;
  display: flex;
}
.left{
  background-color: #fff;
  width: 100px;
}
.right{
  flex: 1;
  background-color: #F5F7F9;
}

CSS 两列布局

float + margin

用 float 将边栏与主要内容拉到一行,然后设置主要内容的 margin。

左边栏:

<main style="background-color: red;">
  <aside style="background-color: yellow; float: left; width: 50px;">边栏</aside>
  <section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>

右边栏

<main style="background-color: red;">
<aside style="background-color: yellow; float: right; width: 50px;">边栏</aside>
<section style="background-color: green; margin-right: 50px;">主要内容</section>
</main>

position: absolute + margin

左边栏:

<main style="background-color: red; position: relative;">
  <aside style="background-color: yellow; position: absolute; left: 0; width: 50px;">边栏</aside>
  <section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>

右边栏

<main style="background-color: red; position: relative;">
<aside style="background-color: yellow; position: absolute; right: 0; width: 50px;">边栏</aside>
<section style="background-color: green; margin-right: 50px;">主要内容</section>
</main>

flex 布局


1)table 布局 当年主流的布局方式,第一种是通过 table tr td 布局 示例:

<style type="text/css">
table{
width: 800px;
height: 300px;
border-collapse: collapse;
}
.left{
background-color: red;

}
.right{
background-color: blue;
}
</style>
<body>
<table>
<tr>
<td class="left">左</td>
<td class="right">右</td>
</tr>
</table>
</body>

页面效果: 文字自动垂直居中,很方便 同样可以设置左右的 width

第二种是类比表格的 table class 示例:

<style type="text/css">
.table{
display: table;
width: 800px;
height: 300px;
/*border-collapse: collapse;*/

}
.tb_row{
display: table-row;
}

.tb_cell{
display: table-cell;
vertical-align: middle;
}


.left{
background-color: red;
}
.right{
background-color: blue;
}
table
</style>
<body>
<div class="table">
<div class="tb_row">
<div class="left tb_cell">左</div>
<div class="right tb_cell">右</div>
</div>
</div>
</body>

页面效果: 跟表格布局一样

2)flexbox 布局

  • 两列布局 关键:父级元素设置 display:flex

示例:

<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 300px;
display: flex;
}
.left{
width: 300px;
height: 100%;
background: red;
}
.right{
flex: 1;
height: 100%;
background: blue;
}

</style>

<body>
<div class="parent">
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>

左右浮动方式 首先需要定义一个清除浮动的类,并把他放在父元素上 0 子元素上左边的儿子左浮动,右边的右浮动,宽度给百分比,高度的话由子元素内容撑起来

.left {
float:left;/* 只写关键代码,以下内容同理 */
width:50%;
}
.right {
float:right;
width:50%;
}

flex 方式 在父元素上添加 display: flex; 2 个子元素添加 flex:1; 当然也可以给左边的指定宽度然后右边自适应。 父元素的高度等于子元素中最高的

.wrapper {
    display: flex;
}
.left {
    flex:1;
    background: #999;
}
.context {
    flex: 1;
    height: 300px;
}

sxxxxxx

#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter #dv1{float:left;width:280px;}
#bodycenter #dv2{float:right;width:410px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

左侧固定,右侧自适应

1)使用 float 和 margin

<div class="box">
    <div class="left"></div>
    <div class="right-fix">
        <div class="right">Hello, world</div>
    </div>
</div>

CSS:

.box { overflow: hidden }
.left {
    float: left;
    width: 200px;
    height: 100px;
    margin-right: -200px;
    background: #888;
}
.right-fix {
    float: right;
    width: 100%;
}
.right {
    margin-left: 200px;
    height: 90px;
    background: #36C;
}

2)使用 display: table 实现

<div class="box">
    <div class="left"></div>
    <div class="right">Hello, world</div>
</div>

CSS:

.box {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.left {
    display: table-cell;
    width: 200px;
    height: 100px;
    background: #888;
}
.right {
    display: table-cell;
    height: 100px;
    background: #36C;
}

3)使用定位实现

<div class="box">
    <div class="left"></div>
    <div class="right">Hello, world</div>
</div>

CSS:

.box {
    position: relative;
}
.left {
    position: absolute; left: 0; top: 0;
    width: 200px;
    height: 100px;
    background: #888;
}
.right {
    height: 100px;
    margin-left: 200px;
    background: #36C;
}

4)使用 flex 布局

<div class="box">
    <div class="left"></div>
    <div class="right">Hello, world</div>
</div>

CSS:

.box {
    display: flex;
}
.left {
    flex: 0 0 200px;
    width: 200px;
    height: 100px;
    background: #888;
}
.right {
    flex: 1;
    height: 100px;
    background: #36C;
}

1 左侧 div 设置 float 属性为 left,右侧 div 设置 margin-left 属性等于或大于左侧 div 宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左右布局</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }

    .left {
      float: left;
      width: 300px;
      height: 300px;
      background: #bfbfbf;
    }

    .right {
      margin-left: 310px;
      height: 300px;
      background: #efefef;
    }
  </style>
</head>
<body>
<p>1 左侧 DIV 设置 float 属性为 left,右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度</p>
<div class="left">left</div>
<div class="right">right</div>

</body>
</html>

实际效果:

2 左侧 div 设置 float 属性为 left,负边距 100%,右侧 div 中嵌套一个 div,页面内容放入嵌套的 div 中,右侧内嵌 div 设置 margin-left 属性等于或大于左侧 div 宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左右布局</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }

    .left {
      float: left;
      width: 300px;
      height: 300px;
      background: #bfbfbf;
      margin-right: -100%;
    }

    .right {
      float: left;
      width: 100%;
    }

    .right-content {
      height: 300px;
      margin-left: 310px;
      background: #efefef;
    }

  </style>
</head>
<body>
<p>2左侧 DIV 设置 float 属性为 left,负边距 100%,右侧 DIV 中嵌套一个 DIV,页面内容放入嵌套的 DIV 中,右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度</p>

<div class="left">left</div>
<div class="right">
  <div class="right-content">right</div>
</div>

</body>
</html>

实际效果:

3 如果将需求修改为右侧固定宽度而左侧自适应宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左右布局</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }

    .left {
      float: left;
      width: 100%;
      height: 300px;
      background: #bfbfbf;
      margin-right: -300px;
    }
    .right {
      float: right;
      width: 300px;
      height: 300px;
      background: #efefef;
    }

  </style>
</head>
<body>
<p>3 如果将需求修改为右侧固定宽度而左侧自适应宽度</p>

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

</body>

实际效果:

4 左边左浮动,右边 overflow:hidden 不过这种方法 IE6 下不兼容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左边左浮动,右边overflow:hidden 不过这种方法IE6下不兼容</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    p{
      margin: 20px 0;
      text-align: center;
    }

    .left {
      float: left;
      width: 200px;
      height: 200px;
      background: #bfbfbf;
    }

    .right {
      overflow: hidden;
      height: 200px;
      background: #efefef;
    }
  </style>

</head>
<body>

<p>左边左浮动,右边overflow:hidden 不过这种方法IE6下不兼容</p>

<div class="left">
  <h4>left</h4>
</div>
<div class="right">
  <h4>right</h4>
</div>
</body>
</html>

实际效果:

5 左边使用绝对定位,右边使用 margin-left

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左边使用绝对定位,右边使用margin-left</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    p{
      margin: 20px 0;
      text-align: center;
    }
    .content{
      position: relative;
    }

    .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
      background: #bfbfbf;
    }

    .right {
      margin-left: 200px;
      height: 200px;
      background: #efefef;
    }
  </style>
</head>
<body>

<p>左边使用绝对定位,右边使用margin-left-最外层需要设置相对定位</p>

<div class="content">
  <div class="left">
    <h4>left</h4>
  </div>
  <div class="right">
    <h4>right</h4>
  </div>
</div>

</body>
</html>

实际效果:

6 左边绝对定位,右边也绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左边绝对定位,右边也绝对定位</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    p {
      margin: 20px 0;
      text-align: center;
    }

    .content {
      position: relative;
    }

    .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
      background: #bfbfbf;
    }

    .right {
      position: absolute;
      left: 200px;
      top: 0;
      right: 0;
      height: 200px;
      background: #efefef;
    }
  </style>
</head>
<body>

<p>左边绝对定位,右边也绝对定位</p>

<div class="content">
  <div class="left">
    <h4>left</h4>
  </div>
  <div class="right">
    <h4>right</h4>
  </div>
</div>

</body>
</html>

实际效果:

000000

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

左边定宽,右边自适应 float + margin

.left{
    width: 100px;
    float: left;
}
.right{
    margin-left: 120px;
}
float + overflow

/*和 1 方法表现的效果一样*/
.left{
    width: 100px;
    float: left;
}
.right{
    margin-left: 20px;
    overflow: hidden;
}
table

.parent{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}
flex

.parent{
    display: flex;
}
.right{
    flex: 1;
}
.left{
    width: 100px;
}
absolute

.parent{
    position: relative;
}
.right{
    position: absolute;
    left: 100px;
    right: 0;
}
.left{
    width: 100px;
}

左边不定宽,右边自适应

float + overflow


.left{
    float: left;
}
.right{
    margin-left: 20px;
    overflow: hidden;
}
table

.parent{
    display: table;
    width: 100%;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%;
}
.left{
    padding-left: 10px;
}
flex

.parent{
    display: flex;
}
.right{
    flex: 1;
}
.left{
    margin-right: 20px;
}

    <div class="ec-contain-flex">
      <div class="ec-contain-img"></div>
      <div class="ec-contain-text"><p>this is text</p></div>
    </div>
    <div class="ec-contain-flex">
      <div class="ec-contain-text"><p>右侧布局</p></div>
      <div class="ec-contain-img"></div>
    </div>
* {
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    /* font-family: "Microsoft YaHei"; */
}
.ec-contain-flex {
    width: 100%;
    min-height: 100px;
    height: auto;
    background: #eee;
    display: flex;
}
.ec-contain-flex .ec-contain-img {
    width: 83px;
    height: 83px;
    background: red;
    flex-grow: 0;
}
.ec-contain-flex .ec-contain-img img {
    width: 83px;
    height: 83px;
}
.ec-contain-flex .ec-contain-text {
    margin-left: 13px;
    width: auto;
    height: auto;
    flex-grow: 1;
}

················

1,一列定宽,一列自适应

float + margin

.left {
    float: left;
    width: 100px;
}
.right {
    margin-left: 120px;
}

table

.parent {
    width: 100%;
    display: table;
    table-layout: fixed;
}
.left, .right {
    display: table-cell;
}
.left {
    width: 100px;
    padding-right: 20px;
}

flex

.parent {
    display: flex;
}
.left {
    width: 100px;
    padding-right: 20px;
}
.right {
    flex: 1;
}

=================

3,一列不定宽,一列自适应

float + overflow

.left {
    float: left;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}

table

.parent {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}

flex

.parent {
    display: flex;
}
.left {
    margin-right: 20px;
}
.right {
    flex: 1;
}

多列不定宽,一列自适应

float + overflow

.left, .center {
    float: left;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}

;;;;;;;;;;;;;;;;;;;;;;

<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>左栏固定宽度,右栏自适应之绝对定位法</title>
	<style type="text/css">
	body{
		margin: 0;
	}
	#nav{
		top: 0;
		left: 0;
		width: 230px;
		height: 600px;
		background: #ccc;
		position: absolute;
	}
	#main{
		height: 600px;
		margin-left: 230px;
		background: #0099ff;
	}
	</style>
</head>
<body>
	<div id="container">
		<div id="nav">
			左栏
		</div>
		<div id="main">
			右栏
		</div>
	</div>
</body>
</html>
看起来很美好,但是。。

由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况:

<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>左栏固定宽度,右栏自适应之绝对定位法</title>
	<style type="text/css">
	body{
		margin: 0;
	}
	#nav{
		top: 0;
		left: 0;
		width: 230px;
		height: 600px;
		background: #ccc;
		position: absolute;
	}
	#main{
		height: 400px;
		margin-left: 230px;
		background: #0099ff;
	}
	#footer{
		text-align: center;
		background: #009000;
	}
	</style>
</head>
<body>
	<div id="container">
		<div id="nav">
			左栏
		</div>
		<div id="main">
			右栏
		</div>
	</div>
	<div id="footer">
		底栏
	</div>
</body>
</html>
我们再来看看第二种方法,左栏固定宽度,右栏自适应之负margin法:

<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>左栏固定宽度,右栏自适应之负margin法</title>
	<style type="text/css">
	body{
		margin: 0;
	}
	#container{
		margin-left: 230px;
		_zoom: 1;
		/*兼容IE6下左栏消失问题*/
	}
	#nav{
		float: left;
		width: 230px;
		height: 600px;
		background: #ccc;
		margin-left: -230px;
		position: relative;
		/*兼容IE6下左栏消失问题,IE6真不让人省心啊>_<*/
	}
	#main{
		height: 600px;
		background: #0099ff;
	}
	</style>
</head>
<body>
	<div id="container">
		<div id="nav">
			左栏
		</div>
		<div id="main">
			右栏
		</div>
	</div>
</body>
</html>
这样无论两栏的高度如何变化都不会有问题了:

<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>左栏固定宽度,右栏自适应之负margin法</title>
	<style type="text/css">
	body{
		margin: 0;
	}
	#container{
		margin-left: 230px;
		_zoom: 1;
		/*兼容IE6下左栏消失问题*/
	}
	#nav{
		float: left;
		width: 230px;
		height: 600px;
		background: #ccc;
		margin-left: -230px;
		position: relative;
		/*兼容IE6下左栏消失问题,IE6真不让人省心啊>_<*/
	}
	#main{
		height: 400px;
		background: #0099ff;
	}
	#footer{
		clear: both;
		text-align: center;
		background: #009000;
	}
	</style>
</head>
<body>
	<div id="container">
		<div id="nav">
			左栏
		</div>
		<div id="main">
			右栏
		</div>
	</div>
	<div id="footer">
		底栏
	</div>
</body>
</html>

右侧固定,左侧自适应

<div class="box">
    <div class="left-fix">
        <div class="left">Hello, world</div>
    </div>
    <div class="right"></div>
</div>

CSS:

.box { overflow: hidden; }
.left-fix {
    float: left;
    width: 100%;
    height: 100px;
    background: #777;
}
.left {
    margin-right: 200px;
}
.right {
    float: right;
    width: 200px;
    height: 100px;
    margin-left: -200px;
    background: #36C;
}

其他实现方式有 display: table、定位以及 flex,原理和左侧固定右侧自适应一致。

左右布局

1.1. 用 ‘float’ 实现左右布局

只要设定两个布局块的宽度总和为 ‘container’(容器) 的宽,那么俩个 class 的 float 属性可均为 ‘float:left;’

也可以用以下方法让右边块级元素自适应左边达到左右布局

即给 ‘right’ 的宽度加上 ‘margin-left’

1.2. 用 ‘position’ 实现左右布局

父元素设置为 position:relative;

left 设置固定宽度,设定为绝对定位’position:absolute’。

right 设置为相对定位’position:relative’。

right 设置左边距,’margin-left’ 为左侧栏的宽度。

https://zhuanlan.zhihu.com/p/38206945


左列定宽,右列自适应

(1) 利用 float+margin▲

html 代码:

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css 代码:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    margin-left: 100px; /*设置间隔,大于等于#left的宽度*/
}

原理:#left 左浮动,脱离文档流,#right 为了不被#left 挡住,设置 margin-left 大于等于#left 的宽度达到视觉上的两栏布局

优缺点

优点:代码简单;容易理解;兼容性好 缺点:#left 的宽度和#right 的 margin-left 需要对应且固定

(2) 利用 float+margin(fix)

html 代码:

<body>
<div id="left">左列定宽</div>
<div id="right-fix">
    <div id="right">右列自适应</div>
</div>
</body>

css 代码:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right-fix {
    float: right;
    width: 100%;
    margin-left: -100px; /*正值大于或等于#left的宽度,才能上移一行*/
}
#right{
    margin-left: 100px; /*大于或等于#left的宽度,才不会遮挡#left*/
    background-color: #0f0;
    height: 500px;
}

优缺点

优点:代码较简单;兼容性好 缺点:相比(1)的方法,多了一个 div,多写了一些代码;不容易理解;margin 需要对应好

(3) 使用 float+overflow▲

html 代码:

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css 代码:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden; /*触发bfc达到自适应*/
}

原理:#left 左浮动,#right 触发 bfc 达到自适应

优缺点:

优点:代码简单;容易理解;无需关注定宽的宽度,利用 bfc 达到自适应效果 缺点:#right 设置 margin-left 需要大于#left 的宽度才有效,或者直接给#left 设置 margin-right

(4) 使用 table 实现

html 代码:

<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>

css 代码:

#parent{
    width: 100%;
    display: table;
    height: 500px;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {background-color: #0f0;}
/*利用单元格自动分配宽度*/
#left,#right{display: table-cell;}

原理:CSS Table 以表格的形式显示

优缺点:

优点:代码简单;容易理解;适用于宽度高度未知情况;兼容性好(ie8+) 缺点:margin 失效;设置间隔比较麻烦;设置 tabl-cell 的元素,宽度和高度的值设置百分比无效,需要给它的父元素设置 display: table; 才生效;table-cell 不感知 margin,在父元素上设置 table-row 等属性,也会使其不感知 height;设置 float 或 position 会对默认布局造成破坏,可以考虑为之增加一个父 div 定义 float 等属性;内容溢出时会自动撑开父元素

(5) 使用 position 实现

html 代码:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css 代码:

#parent{position: relative;}  /*父相*/
#left {
    position: absolute;  /*子绝*/
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;
}
#right {
    position: absolute;  /*子绝*/
    top: 0;
    left: 100px;  /*值大于等于#left的宽度*/
    right: 0;
    background-color: #0f0;
    height: 500px;
}

原理:利用绝对定位算好宽高固定好两个盒子的位置

优缺点

优点:容易理解;兼容性好 代码较多;脱离文档流;左边盒子的 width 需要对应右边盒子的 left 值

(6) 使用 flex 实现

html 代码:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css 代码:

#parent{
    width: 100%;
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    flex: 1; /*均分了父元素剩余空间*/
    background-color: #0f0;
}

原理:flex 设置排列方式、对齐方式罢了,请查阅文末 flex 阅读推荐

优缺点

优点:简单灵活;功能强大 缺点:PC 端兼容性不好,移动端(Android4.0+) flex 务必带上兼容,写法请参考文末阅读推荐,也可以使用 autoprefixer

(7) 使用 Grid 实现

html 代码:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css 代码:

#parent {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto;  /*设定2列就ok了,auto换成1fr也行*/
}
#left {background-color: #f00;}
#right {background-color: #0f0;}

原理:css grid 布局,请查看文末的阅读推荐

优缺点

优点:灵活划分网格区域;新型布局利器,适用于页面三维布局 缺点:兼容性不好,移动端(Android5.0+)

4.2 左列自适应,右列定宽

效果:

image.png

(1) 使用 float+margin▲

html 代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css 代码:

#parent{
    height: 500px;
    padding-left: 100px;  /*抵消#left的margin-left以达到#parent水平居中*/
}
#left {
    width: 100%;
    height: 500px;
    float: left;
    margin-left: -100px; /*正值等于#right的宽度*/
    background-color: #f00;
}
#right {
    height: 500px;
    width: 100px;
    float: right;
    background-color: #0f0;
}

原理:一个左浮一个右浮,#left 宽度 100% 所以要设置 margin-left 负值让#right 上来一行,然后#parent 设置 padding-left 的正值抵消掉#left 的位移,此处换成 margin 也可以

优缺点

优点:代码简单;兼容性好; 缺点:较难理解;margin 或 padding 的值要对应好;浮动脱离文档流,需要手动清除浮动,否则会产生高度塌陷

(2) 使用 float+overflow▲

html 代码:

<body>
<div id="parent">
    <div id="right">右列定宽</div>
    <div id="left">左列自适应</div>   <!--顺序要换一下-->
</div>
</body>

css 代码:

#left {
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #f00;
}
#right {
    margin-left: 10px;  /*margin需要定义在#right中*/
    float: right;
    width: 100px;
    height: 500px;
    background-color: #0f0;
}

原理:#right 右浮动,#left 触发 bfc 达到自适应

优缺点:

优点:代码简单;容易理解;无需关注定宽的宽度,利用 bfc 达到自适应效果 缺点:#left 设置 margin-right 需要大于#right 的宽度才有效,或者直接给#right 设置 margin-left

(3) 使用 table 实现

html 代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css 代码:

#parent{
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    background-color: #f00;
    display: table-cell;
}
#right {
    width: 100px;
    background-color: #0f0;
    display: table-cell;
}

原理:CSS Table 以表格的形式显示

优缺点:

优点:代码简单;容易理解;适用于宽度高度未知情况;兼容性好(ie8+) 缺点:margin 失效;设置间隔比较麻烦;设置 tabl-cell 的元素,宽度和高度的值设置百分比无效,需要给它的父元素设置 display: table; 才生效;table-cell 不感知 margin,在父元素上设置 table-row 等属性,也会使其不感知 height;设置 float 或 position 会对默认布局造成破坏,可以考虑为之增加一个父 div 定义 float 等属性;内容溢出时会自动撑开父元素

(4) 使用 position 实现

html 代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css 代码:

#parent{position: relative;}  /*父相*/
#left {
    position: absolute;  /*子绝*/
    top: 0;
    left: 0;
    right: 100px;  /*大于等于#rigth的宽度*/
    background-color: #f00;
    height: 500px;
}
#right {
    position: absolute;  /*子绝*/
    top: 0;
    right: 0;
    background-color: #0f0;
    width: 100px;
    height: 500px;
}

原理:利用绝对定位算好宽高固定好两个盒子的位置

优缺点

优点:容易理解;兼容性好 代码较多;脱离文档流;左边盒子的 right 需要对应右边盒子的 width 值

(5) 使用 flex 实现

html 代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css 代码:

#parent{
    height: 500px;
    display: flex;
}
#left {
    flex: 1;
    background-color: #f00;
}
#right {
    width: 100px;
    background-color: #0f0;
}

原理:flex 设置排列方式、对齐方式罢了,请查阅文末 flex 阅读推荐

优缺点

优点:简单灵活;功能强大 缺点:PC 端兼容性不好,移动端(Android4.0+) flex 务必带上兼容,写法请参考文末阅读推荐,也可以使用 autoprefixer

(6) 使用 Grid 实现

html 代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css 代码:

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: auto 100px;  /*设定2列,auto换成1fr也行*/
}
#left {background-color: #f00;}
#right {background-color: #0f0;}

原理:css grid 布局,请查看文末的阅读推荐

优缺点

优点:灵活划分网格区域;新型布局利器,适用于页面三维布局 缺点:兼容性不好,移动端(Android5.0+)

4.3 一列不定,一列自适应

(盒子宽度随着内容增加或减少发生变化,另一个盒子自适应)

效果图:

image.png

变化后:

image.png

(1) 使用 float+overflow▲

html 代码:

<body>
<div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css 代码:

#left {
    margin-right: 10px;
    float: left;  /*只设置浮动,不设宽度*/
    height: 500px;
    background-color: #f00;
}
#right {
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #0f0;
}

原理:#left 不设宽度左浮动,#right 触发 bfc 达到自适应

优缺点:

优点:代码简单,容易理解,无需关注宽度,利用 bfc 达到自适应效果 缺点:#right 设置 margin-left 需要大于#left 的宽度才有效,或者直接给#left 设置 margin-right

(2) 使用 flex 实现

html 代码:

<body>
<div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css 代码:

#parent{display: flex;}
#left { /*不设宽度*/
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
    flex: 1;  /*均分#parent剩余的部分*/
}

原理:flex 设置排列方式、对齐方式罢了,请查阅文末 flex 阅读推荐

优缺点

优点:简单灵活;功能强大 缺点:PC 端兼容性不好,移动端(Android4.0+) flex 务必带上兼容,写法请参考文末阅读推荐,也可以使用 autoprefixer

(3) 使用 Grid 实现

html 代码:

<body>
<div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css 代码:

#parent{
    display: grid;
    grid-template-columns: auto 1fr;  /*auto和1fr换一下顺序就是左列自适应,右列不定宽了*/
}
#left {
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
}

原理:css grid 布局,请查看文末的阅读推荐

优缺点

优点:灵活划分网格区域;新型布局利器,适用于页面三维布局 缺点:兼容性不好,移动端(Android5.0+)

★本章小结:


https://www.miidc.com/news/content50642.html

从【3、一列定宽,一列自适应(其他类似的类型都可以由此衍生)】开始看


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

最新文章