以下都是左侧固定宽、右侧自适应宽的左右两列布局
一、左右两列布局=>固定高(如果加上overflow: auto，那么内容超高就会出现滚动条)
1、左右两列布局=>固定高=>方法一：单浮动+margin-left。
```html:run
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="width:200px;float:left;height:500px;background: green;"></div>
<div style="margin-left:210px;background: red;height:500px;"></div>
</body>
</html>
```
2、左右两列布局=>固定高=>方法二：双浮动+calc。
```html:run
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="float:left;height:500px;width:200px;background: green;margin-right:10px;"></div>
<div style="float:left;height:500px;width:calc(100% - 210px);background: red;"></div>
</body>
</html>
```
3、左右两列布局=>固定高=>方法三：单定位+margin-left。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="position:absolute;left:0;width:200px;height:500px;background:green;"></div>
<div style="margin-left:210px;height:500px;background:red;"></div>
</body>
</html>
```
4、左右两列布局=>固定高=>方法四：双定位。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="position:absolute;left:0;width:200px;height:500px;background:green;"></div>
<div style="position:absolute;left:210px;right:0;height:500px;background:red;"></div>
</body>
</html>
```
5、左右两列布局=>固定高=>方法五：flex+flex。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="display:flex">
<div style="width:200px;height:500px;background:green;margin-right: 10px;"></div>
<div style="flex:1;height:500px;background:red;"></div>
</div>
</body>
</html>
```
6、左右两列布局=>固定高=>方法六：calc+inline-block。
```html:run
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="font-size:0;">
<div style="display:inline-block;height:500px;background:green;width:200px;margin-right: 10px;"></div>
<div style="display:inline-block;height:500px;background:red;width:calc(100% - 210px);"></div>
</div>
</body>
</html>
```
二、左右两列布局=>自适应高
1、左右两列布局=>自适应高=>方法一：table。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<title>两列高度自适应</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" style="margin: 0 auto">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>
<p>内容1</p>
<p>内容1</p>
</td>
<td>
<p>内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2</p>
<p>内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2</p>
<p>内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2</p>
<p>内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2</p>
<p>内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2</p>
<p>内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2</p>
<p>内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2</p>
<p>内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2</p>
<p>内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2</p>
<p>内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2,内容2</p>
</td>
</tr>
</table>
</body>
</html>
```
2、左右两列布局=>自适应高=>方法二：margin-bottom+padding-bottom。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列高度自适应</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
overflow: hidden;/*超出最大列高的部分隐藏*/
}
.sidebar {
float: left;
width: 200px;
background: #ff0000;
padding-bottom: 10000px;/*这是撑开盒子*/
margin-bottom: -10000px;/*这是收缩盒子，背景色不会收缩，但多余的背景色将被父级的overflow: hidden剪去;*/
}
.content {
background: #333333;
margin-left: 210px;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
</style>
</head>
<body>
<div id="main">
<div class="sidebar">
我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边,我在左边。
</div>
<div class="content">
我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文, 我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文, 我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文, 我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文,我在正文。
</div>
</div>
<p>我是尾部，我是尾部，我是尾部，我是尾部，我是尾部，我是尾部！</p>
</body>
</html>
```
3、左右两列布局=>自适应高=>方法三：style+getComputedStyle。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#left {
float: left;
width: 200px;
background: red;
}
#right {
margin-left: 210px;
background: green;
}
</style>
</head>
<body>
<div>
<div id="left">
<p>左侧内容</p>
</div>
<div id="right">
<p>右侧内容</p>
<p>右侧内容</p>
<p>右侧内容</p>
<p>右侧内容</p>
<p>右侧内容</p>
<p>右侧内容</p>
<p>右侧内容</p>
<p>右侧内容</p>
<p>右侧内容</p>
</div>
</div>
<p>
<span>底部内容</span>
<span>底部内容</span>
<span>底部内容</span>
<span>底部内容</span>
<span>底部内容</span>
<span>底部内容</span>
<span>底部内容</span>
<span>底部内容</span>
</p>
</body>
</html>
<script type="text/javascript">
var left = document.getElementById("left");
var right = document.getElementById("right");
var leftHeight=parseFloat(getComputedStyle(left).height);
var rightHeight=parseFloat(getComputedStyle(right).height);
var distanceHeight=leftHeight-rightHeight;
if (distanceHeight > 0) {
right.style.height =rightHeight +distanceHeight+ "px";//right.style.height只能赋值，不能获取，所以此处用rightHeight代替right.style.height
//right.style.height =leftHeight+ "px";
} else {
left.style.height = leftHeight-distanceHeight + "px";
//left.style.height = rightHeight + "px";
}
</script>
```
104左右两列布局
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/10967233.html
今日推荐
周排行