样式:

效果是这样的:

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

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

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

  1. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  2. DIV左、中、右三列布局的各类情况说明

    一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> &l ...

  3. web标准(复习)--3 二列和三列布局

    今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...

  4. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  5. 【css】css2实现两列三列布局的方法

    前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...

  6. [CSS布局]简单的CSS三列布局

    前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...

  7. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  8. CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？

    使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...

  9. DIV+CSS 网页布局之：三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

随机推荐

  1. Bran的内核开发指南_中文版

    http://www.cnblogs.com/liloke/archive/2011/12/21/2296004.html 最近在看<orange’s>一书,有点想自己写一个轻量级OS的想 ...

  2. 调用BPL包中的函数

    BPL就是一种DLL,DLL的EXPORTS和GETPROCADDRESS()在BPL中一样好使. 要调用BPL中的方法也和调用DLL的一样.代码略.

  3. 个人常常使用的一些Eclipse技巧

    引言 为了加快开发效率,方便地浏览源代码,重构以及重写一些方法等,Eclipse给我们提供了非常多方便的快捷键以及小技巧.以下是我总结一下经常使用的快捷键和技巧. 快捷键 清理控制台(console) ...

  4. xpath元素查找提示is not clickable

    1.用xpath可以在chrome找到 $x("//mandatory-config-dialog[@is-show='isShowMandatoryConfig']/div/div[2]/ ...

  5. 【Linux】Linux下配置apache

    一.获取软件: http://httpd.apache.org/   httpd-2.4.10.tar.gz 二.安装步骤: 解压源文件: 1) tar zvxf  httpd-2.4.10.tar. ...

  6. TF101出现“DMClient已停止”处理办法

    设定->应用程式->全部->DMClient强制停止 然后 清除数据 然后 重开机 测试通过.

  7. HTTP服务端JSON服务端

    HTTP服务端JSON服务端 最后更新日期:  2014-5-18 Author: Kagula 阅读前提: CMake工具的基本使用 内容简介: CPPCMS是个开源Web开发框架,通过它可以很容易 ...

  8. jdbc数据库中的增删改

    HttpSession session=request.getSession(); session.setAttribute("currentUser",u.username);/ ...

  9. 笔记《javascript高级程序设计》 第12章 DOM2和DOM3

    DOM2 级核心:在 1 级基础上构建,为节点添加更多方法和属性 DOM2 级视图:为文档定义了基于样式信息的不同视图 DOM2 级事件:说明了如何使用事件和DOM文档交互 DOM2 级样式:如何以编 ...

  10. VS2015 右侧导航插件地址

    右侧导航插件: https://marketplace.visualstudio.com/items?itemName=VisualStudioProductTeam.ProductivityPowe ...