文档章节

浮动属性的漏洞

书呆子拍皮球
 书呆子拍皮球
发布于 2016/06/20 10:43
字数 153
阅读 4
收藏 0

当设置如下HTML和css样式时第二个li会相对与上一个继续浮动如下:

这时就需要对li设置一下清除浮动clear属性,对li上下的标签进行一下浮动清除。

理想效果:


HTML代码
<li class="yy_list">
    <div class="box active">
        <div class="choose"></div>
            医院
    </div>
</li>
<li class="yy_list">
    <div class="box">
        <div class="choose"></div>
            类别
    </div>
</li>

css样式

.yy_list{
  height: 96px;
  width: 100%;
 clear: both;
  background-color: #ffffff;
  //border-bottom: 1px solid @border_color;
  .box{
    border-bottom: 1px solid @border_color;
    margin: 0 32px;
    .font(96px, @font24, left, #000, 1);
    .choose {
      width: 20px;
      height: 16px;
      float: left;
      margin: 40px 32px 41px 24px;
    }
    &.active {
      .choose {
        .sprite;
        .ico_16;
      }
      color: @header_color;
    }
  }
}

© 著作权归作者所有

共有 人打赏支持
书呆子拍皮球
粉丝 2
博文 42
码字总数 5423
作品 0
唐山
私信 提问
令人惊叹的 CSS 漏洞攻击,Firefox 和 Chrome 中枪

来自 Google 的安全工程师 Ruslan Habalov 近日在其个人站点中披露,在 Chrome 和 Firefox 等浏览器中出现了一个旁路攻击,能够泄露跨来源框架的视觉内容。发现该漏洞的还有德国的渗透测试工...

王练
06/02
0
0
CSS Float(浮动)

什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往是用于图像,但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动意味着元素只...

wybo521
2016/01/17
21
0
CSS清除浮动

前言 总括: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出...

Damonare
2016/12/07
0
0
CSS中clear:both的理解

在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。...

dhb_oschina
2013/08/15
0
0
css中float和position属性

盒子的三种定位形式 在标准流下的定位 在浮动属性下的定位 在定位属性下的定位 除非设置浮动属性或定位属性,否则所有盒子都是在标准流中定位 顾名思义,标准流中元素盒子的位置由元素在HTM...

RanoB
2016/12/26
14
0

没有更多内容

加载失败,请刷新页面

加载更多

结合lucene谈谈日期的压缩问题

说起日期值的压缩,一般容易想到的办法是将日期转化成long类型,然后再通过变长整形进行压缩,我算了一下按照毫秒来算最多占用5个字节(可以通过“谈谈变长整型”中的表查看),确实节省了部...

FAT_mt
54分钟前
0
0
导出私有函数与私有变量

在Go语言中, package中包含函数与变量通过identifier的首字母是否大写来决定它是否可以被其它package所访问。当一个函数或变量名称为小写字母时,默认是无法被其他package引用的. 有没有办法...

xtof
54分钟前
1
0
new Date() 在Safari下的 Invalid Date问题

问题复现 var timeStr = '2018-11-11 00:00:00';var time = new Date(timeStr);// error: Invalid Date... 在safari浏览器下,time为Invalid Date, 导致后面代码执行错误; 其他浏览器诸...

会写代码的husky
59分钟前
2
0
0009-如何升级Cloudera Manager和CDH

1.文档编写目的 本文档讲述如何升级Cloudera Manager和CDH,通过本文档,您将学习到以下知识: 1.如何对Cloudera Manager进行停机升级 2.如何对CDH进行停机升级 3.如何在不影响集群作业的情况...

Hadoop实操
今天
1
0
vue2中引用 better-scroll的方法

文章主要介绍了vue2中引用better-scroll和使用 better-scroll的方法,使用时有三个要点及注意事项在文中给大家详细介绍 ,需要的朋友可以参考下 使用时有三个要点: 一:html部分 <div class...

前端攻城老湿
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部