外部div自适应内部标签的高度，设置最小高度、最大高度
摘要：一、div自适应高度：在前端开发中经常需要让外层的div自动适应内部标签和内容的高度，内部标签可能是、、或者文字等各种内容。造成外层的div不能自动适应内容高度的原因往往是因为内部标签设置了float属性，下面来看一下解决办法。1.用伪对象清除float属性 1 2 3 4 5 D...
一、div自适应高度：在前端开发中经常需要让外层的div自动适应内部标签和内容的高度，内部标签可能是<div>、<ul>、<ol>或者文字等各种内容。造成外层的div不能自动适应内容高度的原因往往是因为内部标签设置了float属性，下面来看一下解决办法。
1.用伪对象清除float属性
1 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- CSS -->
<style type="text/css">
#wrap2{
width: auto;
height: auto;
min-height: 250px;/*设置最小高度*/
max-height: 500px;/*设置最大高度*/
overflow: hidden;/*内容超出后隐藏*/
border: 2px solid yellow;
}
#wrap2:after{
content: "";
visibility: hidden;
display: block;
clear: both;
}
#inner2{
width: 200px;
height: 200px;
border: 1px solid black;
float: right;
}
</style>
</head>
<body>
<div id="wrap2" class="">
<div id="inner2" class=""></div>
</div>
</body>
</html>
36
2.用空div来清除float属性
1 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- CSS -->
<style type="text/css">
#wrap1{
width: auto;
height: auto;
border: 2px solid yellow;
}
#inner1{
width: 200px;
height: 200px;
border: 1px solid black;
float: right;
}
</style>
</head>
<body>
<div id="wrap1">
<div id="inner1"></div>
<div style="clear:both;"></div> <!-- 在外层div的底部加一个空的div标签，并设置样式为clear:both; -->
</div>
</body>
</html>
二、给div设置最小、最大高度：
1 #wrap1{
width: auto;
min-height: 100px;
max-height: 500px;
overflow: hidden;
border: 2px solid yellow;
}
相关文章
最新发布
阅读排行
热门文章
猜你喜欢