前端ABC1.display:table,这种情况下两列等高,以较高的高度为准.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.parent{
display:table ;
width:100%;
}
.child1{
width:300px;
height:100px;
display:table-cell;
background-color:red;
}
.child2{
height:200px;
background-color:black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
2.display:flex.或者是display:box;实际使用时注意兼容性.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.parent{
display: flex;
width:100%;
}
.child1{
width:100px;
height:100px;
background-color:red;
}
.child2{
height:200px;
flex:1;
background-color:black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
3.浮动.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.parent{
width:100%;
}
.child1{
width:100px;
height:100px;
float:left;
background-color:red;
}
.child2{
height:200px;
margin-left:100px;
background-color:black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
4.绝对定位.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.parent{
width:100%;
}
.child1{
width:100px;
height:100px;
position:absolute;
background-color:red;
}
.child2{
height:200px;
background-color:black;
margin-left:100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
5.calc(),同时要设置diplay:inline-block,(MB的在写的时候因为基准线的问题,会发现在两列不等高时的其他状况还要在设置vertical-align:top),它可以通过加减乘除(运算符号前后都要有空格)进行即使是不同单位(包括% ,px,em,rem)的长度计算,比如calc(100% – (10px + 5px) * 2)
同样需要注意不同浏览器兼容性写法,加前缀.在写的时候发现设置display:inline-block,之间会留有1像素空格.
在父元素里添加 {font-size: 0;
-webkit-text-size-adjust:none;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{
margin:0;
padding:0;
}
.parent{
width:100%;
font-size: 0;
-webkit-text-size-adjust:none;
}
.child1{
width:400px;
height:150px;
display:inline-block;
background-color:red;
vertical-align: top;
}
.child2{
height:100px;
display:inline-block;
background-color:black;
width:calc(100% - 400px);
vertical-align: top;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » 两列布局(左侧固定长度,右侧自适应)的几种方法