浮动存在的问题-20131229

程序员文章站 2022-07-12 21:30:12

...

看一个正常的浮动案例

浮动存在的问题-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>

这个情况下浮动是正常的

然后

浮动存在的问题-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="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的位置开始进行下面一行的排版这样就出现了问题，下面是解决的办法

浮动存在的问题-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">
	<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的各个属性和位置，但是图片就不对了，图片是用来展示的所有问题就出来在了这里