------------------------------------------
<style type="text/css">
*{margin:0;padding:0;}
.wrap div{float:left;height:400px;}
.wrap {overflow:hidden;_zoom:1;}
.content{width:60%;background:gray;}
.nav{width:20%;background:orange;margin-left:-20%;}
.infor{width:19%;background:green;}
</style>
<body>
<div class="wrap">
<div class="content">aaaaa</div>
<div class="nav">bbbbb</div>
<div class="infor">ccccc</div>
</div>
</body>
----------------------------------------
从结构可以看出一个大的父包含框里有三个液态子块,css样式将这些子块向左浮动。在给出计算方法之前,我们需要做一个实验,给导航nav增添一个属性margin-left:20%;这时,我们通过浏览器的显示结果可以知道c模块也就是infor被挤到了下一行显示。再做个对比实验。在原始代码中,把c模块向左移动19%,也就是在infor中添加margin-left:-19%;的属性,浏览器这时会显示c模块覆盖在了b上,但是b和a的位置都没有发生移动。
以上的解释,我们来实现一个bac的布局。我们需要花费很小的移动代价,以尽量少地影响其它模块的位置为前提来布局。我们需要让a模块为b预留相应的宽度位置,b的宽度为20%,所以我们给a增添margin-left:20%;的属性(在本文头部给出的原始未改动的代码中添加)。根据我们实验的结论可知,正边距会使得b和c模块相应的移动,也就是被挤离原来的位置20%,这时b模块要移动到最左边,需要超越a的60%宽度,并加上自己被挤走的20%,使用负边距属性margin-left:-80%;到达预定位置。好了,布局结束。
分享到:
相关推荐
S7-200 Smart入门笔记1-8 程序合集 S7-200 Smart入门笔记1——流水灯 按钮 S7-200 Smart入门笔记1——流水灯 定时器 S7-200 Smart入门笔记2——读时钟 S7-200 Smart入门笔记3——呼吸灯 S7-200 Smart入门笔记4——...
ruby笔记1ruby笔记1ruby笔记1ruby笔记1ruby笔记1ruby笔记1
ssh学习笔记1 ssh学习笔记1 ssh学习笔记1 ssh学习笔记1 ssh学习笔记1 ssh学习笔记1 ssh学习笔记1
JAVAEE系列笔记1.pdfJAVAEE系列笔记1.pdfJAVAEE系列笔记1.pdfJAVAEE系列笔记1.pdf
公开课笔记1-2——线性规划、梯度下降、正规方程组 公开课笔记3——局部加权回归、逻辑斯蒂回归、感知器算法 公开课笔记4——牛顿方法、指数分布族、广义线性模型 公开课笔记5——生成学习、高斯判别、朴素贝叶斯 ...
Mysql学习笔记1
李正元高数截屏笔记1 李正元高数截屏笔记1
JDK 良葛格 java 学习笔记1 JDK 良葛格 java 学习笔记1 JDK 良葛格 java 学习笔记1
C语言笔记1C语言笔记1
java学习笔记1(java io/nio)设计模式
liferay学习笔记1
struts2.0学习笔记1 自己动手做的还算可以的 ]struts2.0学习笔记1 自己动手做的还算可以的struts2.0学习笔记1 自己动手做的还算可以的struts2.0学习笔记1 自己动手做的还算可以的
HTML5笔记1.pdf
PHP学习笔记1
韩顺平.php从入门到精通笔记1 html笔记
javase基础相关笔记1
caffe学习笔记1-7-完整版-薛开宇
在学习java过程中的笔记。
CAN学习笔记 CAN学习笔记1 Ver 0.02
汇总了五篇中文博文,主要针对斯坦福ML公开课的1-5