<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.con{
width: 100%;
border: solid 1px #ff0000;
}
.v1{
width: 20%;
height: 600px;
float: left;
background-color: #2969b0;
margin-bottom: 10px;
}
.v2{
width: 70%;
height: 500px;
float: right;
background-color: #009933;
}
</style>
</head>
<body>
<div class="con">
<div class="v1"></div>
<div class="v2"></div>
</div>
</body>
</html>
如果子标签设置浮动，其父标签不能按照其子标签的高度而自动扩高，这时候可以删除子标签的浮动效果，也可以在父标签中添加浮动效果，那么就会自动扩大高度了
还有一种方式是子标签和父标签都不设置任何浮动，子标签设置display:inline-block;这样的话，父标签的大小还是会被充大的。但是这个还有一个问题。就是会存在两个内部的块级元素不会都在顶部显示，这时候要用
vertical-align: top;来设置。
此外line-height是设置行高的，这个是不能设置其局顶部的，当然，如果你非要让左右两边的div利用行高变成一样的高的话，还是可以上下对齐的。不过，一点点的调试是相当麻烦的。
vertical-align: top;还用于表格上下对齐。
本文介绍了使用CSS进行网页布局的几种常见技巧，包括通过浮动、inline-block及vertical-align等属性解决高度自适应的问题。
扫一扫
1961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
