猫沙盆

挖挖看,也许有宝贝

原创 overflow的另类用法收藏

有人问这个问题:

http://www.ddcat.net/bbs2007/attachment.php?id=366&u=5&extension=png&attach=1208326633_0.png&filename=1.png&attachpath=5

左右布局,图片的宽度不固定。
正好前几天测试闭合浮动元素时发现了overflow的特殊现象,倒是正好可以用在这里。

测试通过:ie6/7 ff2.0 opera9.2 safari 3.0
不过这只是个原形,没有更严密地测试过。
我推测由于需要overflow:auto,因此浏览器会计算元素的实际宽度和高度,所以会有此现象。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.photo  
{
float
:left;
}

{
zoom
:1;
overflow
:auto;
}

</style>
</head>

<body>
<div id="box">
  
<div class="photo"><img src="img/bg1.png" alt="img" /></div>
  
<p> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</body>
</html> 
 

发表于 @ 2008年04月16日 15:48:00|评论(loading...)

新一篇: (X)HTML的文档结构 | 旧一篇: 发现与解决问题

Csdn Blog version 3.1a
Copyright © 豆猫