你的位置:首页 > 软件开发 > 网页设计 > 外部div自适应内部标签的高度,设置最小高度、最大高度

外部div自适应内部标签的高度,设置最小高度、最大高度

发布时间:2015-07-29 17:00:05
一、div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>、<ul>、<ol>或者文字等各种内容。造成外层的div不能自动适应内容高度的原因往往是因为内部标签设置了float属性,下面来看一下 ...

一、div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>、<ul>、<ol>或者文字等各种内容。造成外层的div不能自动适应内容高度的原因往往是因为内部标签设置了float属性,下面来看一下解决办法。

1.用伪对象清除float属性

 1 <!doctype html> 2 <html lang="en"> 3 <head> 4  <meta charset="UTF-8"> 5  <title>Document</title> 6  <!-- CSS --> 7  <style type="text/css"> 8   #wrap2{   9     width: auto;10     height: auto;11     min-height: 250px;/*设置最小高度*/12     max-height: 500px;/*设置最大高度*/13     overflow: hidden;/*内容超出后隐藏*/14     border: 2px solid yellow;15   }16   #wrap2:after{  17     content: "";18     visibility: hidden;19     display: block;20     clear: both;21   }22   #inner2{  23     width: 200px;24     height: 200px;25     border: 1px solid black;26     float: right;27   }28  </style>29 </head>30 <body>31  <div id="wrap2" class="">32   <div id="inner2" class=""></div>33  </div>34 </body>35 </html>36   

原标题:外部div自适应内部标签的高度,设置最小高度、最大高度

关键词:div

div
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。