三列布局中 float引发的一个问题-当“非float的元素”和“float的元素”在一起的时候,如果非float元素在先,那么float的元素将受到排斥。...

最新推荐文章于 2020-11-25 16:44:12 发布
最新推荐文章于 2020-11-25 16:44:12 发布
阅读量103 收藏
点赞数
原文链接：http://www.cnblogs.com/eret9616/p/10846230.html
版权

 样式:

 

 

效果是这样的:

解答:我们发现:靠右的元素自动换行了,原因是:当“非float的元素”和“float的元素”在一起的时候,如果非float元素在先,那么float的元素将受到排斥。

 

解决方法: 如果你在设置span是float:right时,把他放在所有元素的最前面就正常了

 

 

 

转载于:https://www.cnblogs.com/eret9616/p/10846230.html

dglf54292
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IE6 浮动元素与非浮动元素在一起，3px偏移BUG解决方案
何东狮吼
07-27 1302
IE6 浮动元素与非浮动元素在一起，3px偏移BUG *{ margin:0; padding:0; font-size:12px; } .box{ width:220px; overflow:auto; } .leftbox{ backgr
float:right时换行问题新解,解决float块元素在非float块元素中浮动问题
pk3000lc的专栏
05-14 603
做网站中,最常的莫过于显示最新的10条信息了,一般的形式如下:标题内容[2009-4-1]这样的列表,但我们希望,标题显示在左边,而time浮动到右边,然而实际上却出现了time在第二行右边显示,这是因为:当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。针对这种情况,前人给出了一些办法,最好的是:1、把要float的元
学习笔记----float后不与前面元素同行解决办法。
weixin_33966095的博客
08-26 527
<li>文本<span> 16-08-17</span></li> 当非float的元素和float的元素在一起的时候（如上代码）， 如果非float元素在先，那么float的元素将被排斥 也就是说，你的span是float:right，但是你文本还是float:none 如果要让两者占据同一行:要么你把span先于文本显示（如...
IE6的BUG，float浮动元素被非float元素挤到第二行
何东狮吼
07-21 1938
IE float浮动BUG 新闻标题2011-07-21 上面的效果，点击运行后可以查看下，firefox  chrome都正常，但是ie6 ie8下 日期都换行显示了  IE float浮动BUG 2011-07-21新闻标题
牛客网刷题记录（十一）记一个题目：JS的继承方法
SaRAku的博客
04-30 1039
1、如果一个HTML文档内含有阿拉伯文，则应该？ 使用utf-8编码 UTF-8（8-bit Unicode Transformation Format，万国码）。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。 GBK是汉字编码，是双字节码，可表示繁体字和简体字。 ISO8859-2 字符集，也称为 Latin-2，收集了 东欧 字符。 Unicode是国际组织制定的可以...
详解关于浮动元素float使其父元素高度塌陷的原因及解决方法
11-21
浮动元素在网页设计中是一种常见的布局技术，主要是通过设置`float`属性来实现元素的左右移动，以便在有限的空间内实现多列布局。然而，这种技术带来了一个问题，即浮动元素可能会导致其父元素的高度塌陷，也就是父...
CSS中的float和margin的混合使用示例代码
11-20
最近我使用float和margin布局，加深了我对这两个一起使用的理解。（新生可以看一下，大神请忽略） float属性 float: left | right | none | inherit 当然最常用的还是前面两个：向左浮动和向右浮动 浮动最主要的...
CSS display:inline和float:left两者区别探讨
09-25
在CSS布局中，`display:inline` 和 `float:left` 是两个重要的属性，它们分别用于不同的布局策略，但有时也会一起使用以实现特定的设计效果。下面将详细解释这两个属性的含义和区别。 首先，`display:inline` 是一...
Carbon-master.zip_float_安卓开发carbon
09-20
在Android应用开发中，"Carbon-master.zip_float_安卓开发carbon"是一个关于实现浮动按钮（Float Button）的项目，它遵循了Android 5.0（Lollipop）的设计规范，并且能够向下兼容到Android 2.x版本。这样的兼容性...
li float后IE下有空格
09-25
在网页布局设计中，`li` 元素与 `float` 属性的组合常常用于创建水平导航菜单或者列表展示。然而，在Internet Explorer (IE) 浏览器中，特别是旧版本，存在一些兼容性问题，其中之一就是“li float后IE下有空格”...
浮动元素后的非浮动元素问题
一世辛劳的专栏
01-25 1667
点击打开链接 浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在浮动元素“之下”显示。  示例代码如下： <div style="width: 600px; height: 500p
关于Web面试的基础知识点--Html+Css（三）
Lawless
03-07 333
1.CSS中可以继承的属性 继承就是指子节点默认使用父节点的样式属性。 不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。 可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。 所有元素可继承： visibility和cursor 内联元素可继承： letter-spacing、word-spacing、white-space、line-height、c...
用友前端面试题目及知识点
weixin_43995844的博客
07-25 1392
##用友前端面试实习 一、push方法：是向数组末尾添加一个或者多个元素，并返回新的长度 二、pop方法：删除数组的最后一个元素，把数组的长度减1，并且返回它被删除元素的值，如果数组变为空，则该方法不改变数组，返回undefine值 三、unshift()方法：是向数组的开头添加一个或多个元素，并且返回新的长度 四、shift()方法和unshift()方法恰恰相反。该方法用于把数组的第一个元素从其中删除，并返回被删除的值。如果数组是空的，shift()方法将不进行任何操作，返回undefined的值。 五
非浮动元素出现在浮动元素下方的问题
weixin_45878630的博客
11-25 568
非浮动元素内容出现在浮动元素下方，且非浮动元素的css格式与浮动元素重叠的问题 <style type="text/css"> .one{ width: 100px; height: 100px; border: 1px solid black; } </style> <div class="two"> <div class="one" style="float: left;"> 1 </di
关于JavaScript习题的常见的那些坑
依古比古的博客
05-07 779
今天在写题过程中出了挺多没有注意过的错误。 一：js练习题中的坑 1.在标准的 JavaScript 中， Ajax 异步执行调用基于下面哪一个机制才能实现？ 答案：多线程操作。 2. 全局变量和局部变量 function test(a){ a=a+10; } var a=10; test(a); console.log(a); a是形参，属于局部变量，不影响全局变量a的值，因此输出的a是全局...
HTML、CSS重难点知识点
linggty的博客
03-01 1412
怎么让一个不定宽高的 DIV，垂直水平居中? 使用 Flex 只需要在父盒子设置：display: flex; justify-content: center;align-items: center; 使用 CSS3 transform 父盒子设置: position:relative Div 设置: transform: translate(-50%，-50%);position:...
浮动元素的重叠问题
JKR10000的博客
07-27 3179
1、行内元素、行内块元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上 对于行内元素例如： <style> div { float: left; width: 100px; height: 100px; background-color: pink; } span { background-color: red;
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
在HTML中display, float, position三个属性的关系
05-10
display、float和position是HTML/CSS中常用的布局属性。它们的关系如下： ...综上所述，display、float和position三个属性在HTML/CSS中都有其独特的作用，它们可以互相影响，一起实现复杂的布局效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值