Css-自适应高度修复(高度随内容而自动撑高)

时间:2023-03-09 21:09:15
Css-自适应高度修复(高度随内容而自动撑高)
 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
.ReH { width: 100% !important; padding: 0 !important; border: none !important; height: 0px !important; overflow: hidden !important; clear: both !important; margin-top: -1px !important; }
.Con, .Con_cen, .Con_list { margin: 0 auto; }
.Con { width: 1200px; min-height: 120px; border: 1px solid #ff0000; }
.Con_cen { width: 800px; min-height: 120px; border: 1px solid #ff6a00; }
.Con_list { width: 750px; min-height: 120px; border: 1px solid #000000; }
.Con_list li { list-style: none; width: 170px; height: 200px; float: left; margin-right: 20px; margin-bottom: 15px; border: 1px solid #0094ff; }
.Con_list li:nth-child(4n) { margin-right: 0; }
.Con_list li.ReH { float: none !important; margin: 0 !important;/*清除特殊元素的干扰样式*/ }
</style>
</head>
<body>
<div class="Con">
<div class="Con_cen">
<ul class="Con_list">
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li class="ReH"></li>
</ul>
<div class="ReH"></div>
</div>
<div class="ReH"></div>
</div>
</body>
</html>