该博客讨论了如何使用CSS使DIV的高度根据内部内容自动调整。通过展示一个包含多个浮动元素的示例，演示了如何创建一个可以随着内容增加而增高的容器。主要涉及到CSS的布局技巧和浮动元素的清除。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ceshidivHeight.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<style type="text/css">
.wrap{width:776px;background:url(images/bullet.png)repeat-y 100%;}
.clear{clear:both;}
</style>
<form id="form1" runat="server">
<div>
<div class="wrap">
<div style="width:100px; height:100px;border:1px solid yellow; float:left;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">
</div>
<div style="width:100px; height:500px;border:1px solid yellow; float:left;margin-left:20px;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left;margin-left:20px;">
</div>
<div class="clear">
</div>
</div>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<style type="text/css">
.wrap{width:776px;background:url(images/bullet.png)repeat-y 100%;}
.clear{clear:both;}
</style>
<form id="form1" runat="server">
<div>
<div class="wrap">
<div style="width:100px; height:100px;border:1px solid yellow; float:left;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">
</div>
<div style="width:100px; height:500px;border:1px solid yellow; float:left;margin-left:20px;">
</div>
<div style="width:100px; height:100px;border:1px solid yellow; float:left;margin-left:20px;">
</div>
<div class="clear">
</div>
</div>
</div>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
