浮动存在的问题-20131229

最新推荐文章于 2022-07-13 16:42:08 发布

xjwolaile

最新推荐文章于 2022-07-13 16:42:08 发布

阅读量106

点赞数

分类专栏：前端技术学习

本文链接：https://blog.csdn.net/xjwolaile/article/details/84516134

版权

学习同时被 2 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

看一个正常的浮动案例

[img]http://dl2.iteye.com/upload/attachment/0092/6455/34e80a1b-ae5e-3cd0-a8fc-bfce5845aae1.jpg[/img]


<!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>

这个情况下浮动是正常的

然后

[img]http://dl2.iteye.com/upload/attachment/0092/6457/334e65e6-a91e-3f68-b93d-732d267f0e5e.jpg[/img]


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

[img]http://dl2.iteye.com/upload/attachment/0092/6459/67b38ccc-3e68-39a9-864b-462f62a03aa9.jpg[/img]


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

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动存在的问题-20131229

看一个正常的浮动案例[img]http://dl2.iteye.com/upload/attachment/0092/6455/34e80a1b-ae5e-3cd0-a8fc-bfce5845aae1.jpg[/img][code="html5"]*{ margin: 0px; padding:0px;}.xxx{ width: 300px;}....
复制链接

扫一扫