样式:

效果是这样的:

解答:我们发现:靠右的元素自动换行了,原因是:当“非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. [Cypress] Test Variations of a Feature in Cypress with a data-driven Test

    Many applications have features that can be used with slight variations. Instead of maintaining mult ...

  2. python 003 os模块 example

    import os for tmpdir in ('/tmp',r'C:/Users/Administrator/PycharmProjects/'): if os.path.isdir(tmpdir ...

  3. 洛谷⑨月月赛Round2 官方比赛 OI

    自评: (完成时间3.5时) 第一题 模拟 虽然A了,代码敲得有点慢 第二题 最短路 第一次敲对了,又考虑数据范围和答案范围,改错了,100分改成42分.QAQ. 第三题 乱搞 80分 还可以(因为没 ...

  4. luogu1006 传纸条

    题目大意 小渊坐在矩阵的左上角,坐标 (1,1 ),小轩坐在矩阵的右下角,坐标 (m,n) .从小渊传到小轩的纸条只可以向下或者向右传递,从小轩传给小渊的纸条只可以向上或者向左传递. 在活动进行中,小 ...

  5. B1800 [Ahoi2009]fly 飞行棋 数学模拟

    20分钟一遍AC,大水题,我的算法比较复杂,但是好理解,就是找可以凑出来一半周长的点来暴力枚举就行了. 题干: Description 给出圆周上的若干个点,已知点与点之间的弧长,其值均为正整数,并依 ...

  6. fsockopen get,post 封装 （转）

    function http_request($url, $method = 'GET', $postfields = NULL, $headers = array()) {   $parse = pa ...

  7. A simple problem(并查集判环)

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2497 题意:给定一些点和边的关系,判断S点是否 ...

  8. dijkstra的stl实现（最近觉得挺方便的

    dijkstra的stl实现(最近觉得挺方便的 stl可作为跳板 --- Rujia liu struct node { int dis, id; node(int dis = 0, int id = ...

  9. python中使用pip安装报错：Fatal error in launcher... 解决方法

    python安装了2和3版本在 cmd 中用pip报的错误为:Fatal error in launcher:Unable to create process using 这是因为你安装了python ...

  10. HTML 13 常用构造函数( 类 )

    Number * Data ** String **** Array ***** Math **** RegExp *****