aaarticlea/png;base64,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" alt="" />

html:
<div class="leftdiv">
<ul class="link">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
css:
.leftdiv{
width:260px;
}
.link li{
float: left;
margin-right: 4px;
margin-top: 4px;
width:118px;
}

原因:如果包含块太窄,无法容纳水平排列的浮动元素,那么其他浮动块向下移动,直到有空间的地方。

使用float属性的一些小技巧的更多相关文章

  1. YbSoftwareFactory 代码生成插件【十九】:实体类配合数据库表字段进行属性扩展的小技巧

    实体类通常需要和数据库表进行了ORM映射,当你需要添加新的属性时,往往同时也需要在数据库中添加相应的字段并配置好映射关系,同时可能还需对数据访问组件进行重新编译和部署才能有效.而当你开始设计一个通用数 ...

  2. code snippet:依赖属性propa的小技巧

    很早之前就玩过VS里面的code snippet,相当方便. 今天在用prop自动属性代码时,无意中用了一下propa,然后就自动出来了依赖属性的代码片段,太方便了,尤其是对于WPF新手来说,比如我这 ...

  3. cssfloat布局以及其他小技巧

    css float 布局以及其他小技巧总结 这篇博文 前面四个部分是关于css 经典布局 如果你已经知道了 可以直接跳过看第六部分 css 的其他小技巧 1.0 左右居中布局 <!DOCTYPE ...

  4. JS前端下载文本文件小技巧:1、download属性;2、借助Blob转换成二进制下载

    一.HTML download 与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large. ...

  5. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  6. iOS:小技巧(不断更新)

    记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...

  7. ( 译、持续更新 ) JavaScript 上分小技巧(二)

    考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...

  8. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  9. Css 小技巧总结

    相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会 ...

随机推荐

  1. H5学习之旅-H5的布局(10)

    两种实现方式:div和table div实现布局的方式 代码实例 <!DOCTYPE html> <html lang="en"> <head> ...

  2. UGUI实现NGUI的UIEventListener功能

    在unity中处理UI事件时,习惯了使用NGUI的UIEventListener,虽然UGUI也有AddListener,但是一个组件只能对应一个函数,不能在一个函数中同时处理多个事件,显得有些麻烦 ...

  3. 《java入门第一季》二维数组三个案例详解

    案例一:遍历二维数组 /* 需求:二维数组遍历 外循环控制的是二维数组的长度,其实就是一维数组的个数行数. 内循环控制的是一维数组的长度,每一行,一维数组元素分别的个数. */ class Array ...

  4. C++项目中的extern "C" {}(转)

    注:本文转自吴秦先生的博客http://www.cnblogs.com/skynet/archive/2010/07/10/1774964.html#.吴秦先生的博客写的非常详细深刻容易理解,故特转载 ...

  5. ubuntu下搭建gtk+编程环境

    首先gtk+项目主页为: http://www.gtk.org/ gtk+现在有2和3两种版本,使用 sudo apt-get install gnome-core-devel 可以一次性安装2个版本 ...

  6. Oracle Global Finanicals Technical Reference(一)

    Skip Headers Oracle Global Finanicals Oracle Global Financials Technical Reference Manual Release 11 ...

  7. 大数据小视角1:从行存储到RCFile

    前段时间一直在忙碌写毕设与项目的事情,很久没有写一些学习心得与工作记录了,开了一个新的坑,希望能继续坚持写作与记录分布式存储相关的知识.为什么叫小视角呢?因为属于随想型的内容,可能一个由小的视角来审视 ...

  8. 通向从容之道——Getting things done读书笔记

    一.主要的两个目的:         1. 抓住所有一切需要处理的事情:         2. 训练自己在接受一切"输入信息"的前期作出决定.   二.目前的问题:         ...

  9. 以太坊智能合约虚拟机(EVM)原理与实现

    以太坊 EVM原理与实现 以太坊底层通过EVM模块支持合约的执行与调用,调用时根据合约地址获取到代码,生成环境后载入到EVM中运行.通常智能合约的开发流程是用solidlity编写逻辑代码,再通过编译 ...

  10. windows环境下zookeeper安装和使用

    一.简介        zooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一 ...