使用float属性的一些小技巧
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属性的一些小技巧的更多相关文章
- YbSoftwareFactory 代码生成插件【十九】:实体类配合数据库表字段进行属性扩展的小技巧
实体类通常需要和数据库表进行了ORM映射,当你需要添加新的属性时,往往同时也需要在数据库中添加相应的字段并配置好映射关系,同时可能还需对数据访问组件进行重新编译和部署才能有效.而当你开始设计一个通用数 ...
- code snippet:依赖属性propa的小技巧
很早之前就玩过VS里面的code snippet,相当方便. 今天在用prop自动属性代码时,无意中用了一下propa,然后就自动出来了依赖属性的代码片段,太方便了,尤其是对于WPF新手来说,比如我这 ...
- cssfloat布局以及其他小技巧
css float 布局以及其他小技巧总结 这篇博文 前面四个部分是关于css 经典布局 如果你已经知道了 可以直接跳过看第六部分 css 的其他小技巧 1.0 左右居中布局 <!DOCTYPE ...
- JS前端下载文本文件小技巧:1、download属性;2、借助Blob转换成二进制下载
一.HTML download 与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large. ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- iOS:小技巧(不断更新)
记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...
- ( 译、持续更新 ) JavaScript 上分小技巧(二)
考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- Css 小技巧总结
相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会 ...
随机推荐
- unity 实现流光效果
1.通过一些简单效果可以让我们更好的去理解shader,具体都在代码注释中: Shader "Unlit/MoveLightImage" { Properties { //主纹理 ...
- UIEvent UIResponder UI_04
1.事件(UIEvent),是由硬件设备捕捉到用户对设备的操作,把这个操作抽象成一个事件对象 ios中三大事件:触Touches摸晃动事件Motion,远程控制事件RemoteControl: ...
- 【算法导论】图的深度优先搜索遍历(DFS)
关于图的存储在上一篇文章中已经讲述,在这里不在赘述.下面我们介绍图的深度优先搜索遍历(DFS). 深度优先搜索遍历实在访问了顶点vi后,访问vi的一个邻接点vj:访问vj之后,又访问vj的一个邻接点, ...
- 在自己的服务器上安装GitBook
更新时间:2016-08-05 更新说明: 由于在 Linux 内核的机器上安装 Calibre 需要安装的依赖库过多,故不推荐在此类机器上使用格式转换功能.你可以阅读 在自己的电脑上安装GitBoo ...
- How Tomcat Works 读书笔记 八 载入器 上
Java的类载入器 详细资料见 http://blog.csdn.net/dlf123321/article/details/39957175 http://blog.csdn.net/dlf1233 ...
- GCC/gcc/g++/CC/cc区别
平常在Linux上经常会用到gcc或者g++来编译程序,但对这两者的理解也就停留在一个是用来编译C程序,另一个是用来编译C++程序的(请注意:这种说法是有问题的,待会改进). 1. GCC GCC,是 ...
- Gradle 1.12用户指南翻译——第四十章. ANTLR 插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- ITU-T Technical Paper: QoS 的参数(非常的全,共计88个)
本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...
- 一个简单的基于 DirectShow 的播放器 1(封装类)
DirectShow最主要的功能就是播放视频,在这里介绍一个简单的基于DirectShow的播放器的例子,是用MFC做的,今后有机会可以基于该播放器开发更复杂的播放器软件. 注:该例子取自于<D ...
- React Native Android开发环境配置
近些年,Web前端甚是火爆,火爆程度堪比我毕业时的移动端开发一般.随着JavaScript的火爆,移动端也不安分了起来,ReactNative就异军突起了,几乎要做到"一次学习,四处开发&q ...