样式:

效果是这样的:

解答:我们发现:靠右的元素自动换行了,原因是:当“非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. iOS: 在Swift中优雅的实现Substring

    在Swift中,当我们想要截取某个字符串时,方法如下: let carNumber = "沪A12345" let startIndex = advance(userCar.car ...

  2. Django网站管理--ModelAdmin

    class AuthorAdmin(admin.ModelAdmin): list_display=('name', 'age', 'sex') #指定要显示的字段 search_fields=('n ...

  3. Java-java-com-util-common-service：CrudService.java

    ylbtech-Java-java-com-util-common-service:CrudService.java 1.返回顶部 1. package com.shineyoo.manager.ut ...

  4. PCB MS SERVER 数据导出与导入操作步骤----使用第3方工具

    工作每天都与数据库打交道,经常会遇到一些需要将数据库中的数据导出来或将数据导入到数据库 而用微软数据库客户端自带的功能操作步骤好麻烦的,用过的大家都会有相同的感受吧. 微软客户端不好之处整理:这里吐槽 ...

  5. 原生JS---3

    原生js学习笔记3——数组 定义数组 两种方式定义一个数组: 1. var array1 = new array(1, 2, 3, 4); 2. var array2 = [1, 2, 3, 4]; ...

  6. 常用的 Maven 命令

    maven 命令的格式为 mvn [plugin-name]:[goal-name],可以接受的参数如下. -D 指定参数,如 -Dmaven.test.skip=true 跳过单元测试: -P 指定 ...

  7. 网络流模板(模板题：POJ1273)

    模板题:POJ1273 EK: #include <queue> #include <cstdio> #include <cstring> #include < ...

  8. 数组中hashCode就是内存地址，以及汉字幻化为16进制或10进制

    int[] arr4={1,2,3,4,5}; System.out.println("arr4: "+arr4); System.out.println("arr4.h ...

  9. Oracle 关于oracle自带的行转列函数

    前言: 环境是java+hibernate+oracle11g 目标是将某表中根据id分组后将name字段的值拼接到一列中,且用“,“进行分割 试过用 wm_concat() 结合 group by ...

  10. EntityFramewok 插入Mysql数据库 中文产生乱码解决

    首先Mysql表,建表的时候,有没有选择UTF8,如果是默认的编码latin1,就会产生乱码 这里修改后,还是乱码,那就要检查发生乱码的列是不是UTF8格式 然后修改App.Config或者Web.C ...