61,112
社区成员
发帖
与我相关
我的任务
分享关于清除浮动问题。
清除浮动后，右边第一个Item高度不知道为什么会等于左边Side.怎么让第一个Item高度自适应。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.clear{clear: both;}
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both;font-size: 0px; }
.clearfix { zoom:1; }
.Side{width: 200px;height: 500px;float: left; background-color: #000;color: #fff;}
.Content{margin-left: 220px;}
.Content .Item{border: 1px #f00 solid; margin-bottom: 2%;}
.Content .Item div{width: 40%;padding: 2%;margin: 2%;border: 1px #f00 solid; float: left;}
</style>
</head>
<body>
<div class="Side">
固定宽 200
右边宽度自适应
</div>
<div class="Content">
<div class="Item clearfix">
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
<div class="Item clearfix">
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div>内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
扑鸡仔 2016-10-08
- 打赏
- 举报
问题解决了，Item外层加上 overflow: hidden; 就行了。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.clear{clear: both;}
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both;font-size: 0px; }
.clearfix { zoom:1; }
.Side{width: 200px;height: 500px;float: left; background-color: #000;color: #fff;}
.Content{margin-left: 220px;}
.Content .Item{border: 1px #f00 solid; margin-bottom: 2%;}
.Content .Item div{width: 40%;padding: 2%;margin: 2%;border: 1px #f00 solid; float: left;}
.ItemWarp{overflow: hidden;}
</style>
</head>
<body>
<div class="Side">
固定宽 200
右边宽度自适应
</div>
<div class="Content">
<div class="ItemWarp">
<div class="Item clearfix">
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
<div class="Item clearfix">
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div>内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
</div>
</div>
</body>
</html>
天际的海浪 2016-09-30
- 打赏
- 举报
.Content{margin-left: 25px; float: left; width: 600px; }
