`

浮动存在的问题-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的各个属性和位置,但是图片就不对了,图片是用来展示的所有问题就出来在了这里
  • 大小: 4.3 KB
  • 大小: 6.1 KB
  • 大小: 5.3 KB
分享到:
评论

相关推荐

    12_浮动的问题-高度塌陷.html

    然而,在使用浮动布局时,开发者常常会遇到一个典型问题,即“高度塌陷”。高度塌陷是指当容器元素内的子元素全部应用浮动样式后,导致该容器元素无法自动扩展其高度以包含这些浮动元素,从而导致页面布局出现混乱。...

    网页浮动QQ--网页浮动客服--浮动QQ

    网页浮动QQ,自己做的,给一个客户使用的时候用到的,预览效果可以点击下边的链接看下是否满意 http://www.592yu.cn/xw/news/1057.html

    mfc浮动窗口--类似迅雷半透明的浮动窗口

    在IT领域,浮动窗口是一种常见的用户界面元素,它可以在屏幕上的任意位置自由移动,并且能够保持在其他窗口之上显示。这种设计通常用于提供快速访问的信息或者功能,例如通知、快捷操作面板等。在Windows系统中,MFC...

    04_浮动的练习-图文环绕.html

    3. 清除浮动:在进行浮动布局时,一个常见问题是浮动元素会影响后续元素的布局,导致布局错乱。为了解决这一问题,我们需要在浮动元素之后使用“清除浮动”的技术。常见的清除浮动方法包括添加一个空的div并设置其`...

    担保法PPT课件 第十节 动产浮动抵押权-十二节.ppt

    担保法PPT课件 第十节 动产浮动抵押权-十二节

    百度右下角浮动留言效果-多风格

    "百度右下角浮动留言效果-多风格"是一个针对网页互动设计的案例,旨在模仿百度网站上的一种流行功能,即在页面右下角显示一个可弹出的小窗口,提供留言或交互服务。这种效果能够吸引用户的注意力,同时不会过于干扰...

    分割器浮动平台压装-SOLIDWORKS零件图-机械工程图-机械三维3D设计图

    这种设计考虑了结构力学和材料性能,避免了长期使用中的磨损和精度下降问题。 “分割器浮动平台压装sw21可编辑”这个文件名表明这是一份可编辑的SOLIDWORKS模型文件,很可能包含了详细的组件设计、装配关系以及运动...

    Android 浮动窗口播放器-IT计算机-毕业设计.zip

    【Android浮动窗口播放器】是一种在Android操作系统上实现的创新性功能,允许用户在主屏幕或其他应用程序之上显示一个小巧的媒体播放窗口。这种设计让用户在观看视频或听音乐的同时进行其他操作,提高了多任务处理的...

    Android 视频浮动窗口源码-IT计算机-毕业设计.zip

    在Android平台上,实现视频浮动窗口是一项技术挑战,它涉及到多个Android系统级别的组件和技术。这个"Android 视频浮动窗口源码"项目是一个很好的学习资源,适用于Android开发的学习者,特别是那些正在进行毕业设计...

    RSI 浮动双重随机 - MetaTrader 5脚本.zip

    **RSI 浮动双重随机指标 - MetaTrader 5脚本** 在金融市场分析中,技术指标是交易者的重要工具,帮助他们识别趋势、确定入场和出场时机。MetaTrader 5是一个广泛使用的交易平台,它提供了丰富的自定义指标和脚本...

    浮动的窗体-初学者练习用

    这是一个小程序,仅仅供练习使用。给出可浮动的窗体的编写方法,适用于初级编程者

    jQuery万能浮动框插件jquery-powerFloat

    **jQuery万能浮动框插件jquery-powerFloat**是一款强大的JavaScript插件,专为网页设计者和开发者提供方便快捷的浮动效果实现。它基于流行的jQuery库,使得在网页中添加浮动图片、文字或者其他元素变得轻而易举。这...

    价格区域振荡器 - 浮动级别平滑 - MetaTrader 5脚本.zip

    为了过滤掉价格区域振荡器 - 浮动级别指标的某些信号,在此版本中添加了平滑。

    机器人软浮动功能-FANUC

    在将工件安装在机床上进行作业的情况下,由于工件的精度偏差,与机床之间的相对位置会出现偏移,由此可能导致工件与机床相互干涉,在将精度上有偏差的工件安装到机床上时,软浮动功能将十分有效

    css浮动的有关问题

    ### CSS 浮动基础知识与常见问题解析 #### CSS 浮动概述 在CSS布局中,`float`属性是一个非常重要的概念,它允许元素脱离文档流并漂浮到一边,这样其他内容可以环绕在该元素周围。`float`属性主要用于创建多列布局...

    02_浮动-浮动的规则三.html

    在深入探讨“02_浮动-浮动的规则三”这一主题之前,有必要先对CSS中的浮动属性有一个基础了解。浮动是CSS布局中的一种方式,允许开发者使得元素脱离文档流,并可以向左或向右靠齐,直到它的外边缘碰到包含框或另一个...

    01_浮动-浮动的规则一二.html

    然而,一旦脱离文档流,浮动元素的兄弟元素将不会再认为浮动元素存在,因此可能会“无视”浮动元素而直接向上移动,这是新手常常遇到的问题。 文章进一步讨论了浮动的第二条规则:浮动元素本身会尽量向左或向右移动...

    CSS清除浮动_清除float浮动 - DIVCSS5.htm

    具体详细的阐述了css浮动如何解决和浮动产生的原因。

    Python解析Excel处理浮动图片-示例

    Python解析Excel处理浮动图片-示例

    Android 浮动窗口-IT计算机-毕业设计.zip

    在Android平台上,浮动窗口(通常被称为“悬浮窗”或“悬浮应用”)是一种可以在其他应用程序之上显示的小型窗口。这种技术常用于实现辅助工具、快捷操作或者多任务处理功能。在Android开发中,理解如何创建和管理...

Global site tag (gtag.js) - Google Analytics