欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

浮动存在的有关问题-20131229

更新时间: 2014-01-05 00:50:24 责任编辑: Author_N1

 

浮动存在的问题-20131229
看一个正常的浮动案例




<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<style>
*{ margin: 0px; padding:0px;}
.xxx{ width: 300px;}
.xxx img{ float: left;}
.sss{ float: right; width: 100px; height: 200px; overflow: hidden;}
</style>
</head>

<body>
<div class="xxx">
	<img src="" width="100" height="100">
	<img src="" width="100" height="100">
	<img src="" width="100" height="100">
	<img src="" width="100" height="100">
	<img src="" width="100" height="100">
	<!--<div class="sss"><img src="" width="100" height="200"></div>-->
</div>
</body>
</html>



这个情况下浮动是正常的

然后




<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<style>
*{ margin: 0px; padding:0px;}
.xxx{ width: 300px;}
.xxx img{ float: left;}
.sss{ float: right; width: 100px; height: 200px; overflow: hidden;}
</style>
</head>

<body>
<div class="xxx">
	<img src="" width="100" height="100">
	<img src="" width="100" height="100">
	<img src="" width="100" height="200">
	<img src="" width="100" height="100">
	<img src="" width="100" height="100">
	<!--<div class="sss"><img src="" width="100" height="200"></div>-->
</div>
</body>
</html>



当第三个图片到达200的高度后浮动就出现了问题,第二排的图片上方出现了100px的空位没办法浮动上去要是定位的话就比较麻烦了,这是为什么,时候因为第一用的是距左浮动从左到右,当第三个图片的长度为200的时候浮动定位阅读的在转行的时候默认是200px,从200px的位置开始进行下面一行的排版这样就出现了问题,下面是解决的办法




<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<style>
*{ margin: 0px; padding:0px;}
.xxx{ width: 300px;}
.xxx img{ float: left;}
.sss{ float: right; width: 100px; height: 200px; overflow: hidden;}
</style>
</head>

<body>
<div class="xxx">
	<img src="" width="100" height="100">
	<img src="" width="100" height="100">
	<div class="sss"><img src="" width="100" height="200"></div>
	<img src="" width="100" height="100">
	<img src="" width="100" height="100">
</div>
</body>
</html>



给超出的图片从新定义一个div然后指定他的长度和高度后居右浮动,这样当看下面的图片距左的时候就会默认已第一排距左的高度来定义下面一排重什么高度开始这样就很好的决解了这个问题,还有问会说把第三张图片的定位换成居右的就没问题了呀,不行的因为这样还是为干扰到第二排的图片,因为div是块级元素,本身就是用来装东西,页面可以辨识出div的各个属性和位置,但是图片就不对了,图片是用来展示的所有问题就出来在了这里
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:50:24
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/400/
本文WWW.DOC100.NET DOC100.NET版权所有。