masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 外部div自适应内部标签的高度，设置最小高度、最大高度_html/css_WEB-ITnose

外部div自适应内部标签的高度，设置最小高度、最大高度_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:39:54
asal
1730 orang telah melayarinya

一、div自适应高度：在前端开发中经常需要让外层的div自动适应内部标签和内容的高度，内部标签可能是

、
    、
    或者文字等各种内容。造成外层的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
    Salin selepas log masuk

    2.用空div来清除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     #wrap1{     9         width: auto;10         height: auto;11         border: 2px solid yellow;12     }13     #inner1{    14         width: 200px;15         height: 200px;16         border: 1px solid black;17         float: right;18     }19   </style>20  </head>21  <body>22   <div id="wrap1">23     <div id="inner1"></div>24     <div style="clear:both;"></div> <!-- 在外层div的底部加一个空的div标签，并设置样式为clear:both; -->25   </div>26  </body>27 </html>
    Salin selepas log masuk

    二、给div设置最小、最大高度：

    1 #wrap1{    2         width: auto;3         min-height: 100px;4         max-height: 500px;5         overflow: hidden;6         border: 2px solid yellow;7     }
    Salin selepas log masuk

     

Label berkaitan：
外部div自适应内部标签的高度，设置最小高度、最大高度
sumber：php.cn
Artikel sebelumnya：HTML框架,链接，登录，注册联合应用_html/css_WEB-ITnose Artikel seterusnya：百度地图之事件处理--获取所在的经纬度（百度地图简单使用）_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2282
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2417
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2032
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1917
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1991
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan