有人问这个问题:
左右布局,图片的宽度不固定。
正好前几天测试 闭合浮动元素时发现了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;
}
p {
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
>
本文介绍了一种使用overflow属性解决左右布局中图片宽度不定的问题的方法,并提供了HTML和CSS代码示例。该方法通过设置overflow:auto使浏览器计算元素实际宽高。


.photo
2646

被折叠的 条评论
为什么被折叠?



