float与position
使用float会使块级元素的宽高表现为包裹内容(在不设定宽高的情况下) 这是当然的 我们使用float就是使几个div排在一行 当然不可能在宽度上撑满父元素啦 至于高度 不论有没有float 高度默认都是包裹元素的
有这么一道题
现有并列的三列布局结构,从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 Html 结构的情况下用CSS实现:ABC,CBA,BAC 三种布局及在CBA排列下使B宽度自适应(三列总宽度100%),不能使用针对浏览器的CSS Hack.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.content{
position: relative;
width: 960px;
height: 50px;
margin: 10px;
} .a{
width: 180px;
background-color: red; }
.b{
width: 600px;
background-color: green;
} .c{
width: 180px;
background-color: blue;
} .a1{
float: left;
} .b1{
float: left;
} .c1{
float: right;
} .a2{
float: right;
} .b2{
float: right; } .c2{
float: left;
} .a3{
position: absolute;
left: 600px;
} .b3{
float: left;
} .c3{
float: right;
} .a4{
position: absolute;
left: 81.25%;
top:0px;
} .b4{
width: auto;
position: relative;/*设定了position 在此基础上才能加上left right等 这个值表示相对于普通流的位置作偏移====> 因此有可能超出父元素 这个设定了position说的是除了static之外的position static是默认position
PS left right只能同时使用一个 top bottom 也是*/
margin-left: 18.75%;/*为a和c的显示预留空间*/
margin-right: 18.75%;/*为a和c的显示预留空间*/
} .c4{
position: absolute;/*脱离了文档流 相对于父元素作偏移 */
/*关于position可以参考http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html*/
/*以及http://www.cnblogs.com/coffeedeveloper/p/3145790.html*/
left: 0%;
top: 0px;
} </style>
</head> <body>
实现abc排列
<div class='content'>
<div class='a a1'>a</div>
<div class='b b1'>b</div>
<div class='c c1'>c</div>
</div> 实现cba排列
<div class='content'>
<div class='a a2'>a</div>
<div class='b b2'>b</div>
<div class='c c2'>c</div>
</div> 实现bac排列
<div class='content'>
<div class='a a3'>a</div>
<div class='b b3'>b</div>
<div class='c c3'>c</div>
</div> cba排列 同时b自适应宽度
<div class='content'>
<div class='a a4'>a</div>
<div class='b b4'>b</div>
<div class='c c4'>c</div>
</div>
</body>
</html>
float与position的更多相关文章
- CSS传统布局之display属性+float属性+position属性
这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...
- float和position谁好?
float从字面上的意思就是浮动,float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.不过需要注意的是清除浮动是我们可能需要注意的地方.而position ...
- CSS布局模型学习(Float、Position、Flexbox)
一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...
- inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题
我们知道内联元素是不能设置宽.高的,但是一旦使其脱离了文档流,就可以了,这是因为它已经变成了块级元素. 例1: <!DOCTYPE html> <html lang="en ...
- CSS 盒子模型及 float 和 position
## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...
- CSS 中,用 float 和 position 的区别是什么?
CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...
- float与position间的区别
float与position间的区别: 个人理解为:脱离文档流不一定脱离文本流:但脱离文本流,则也脱离文档流.[如有更好的理解还望评论区一起探讨,共同学习进步]一.float 浮动(脱离文档流, ...
- float和position:absolute脱离文本流的区别
float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成 ...
- [转][译]关于CSS中的float和position和z-index
原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...
- CSS:布局的三个关键属性:float、position、display
最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...
随机推荐
- C# 保留小数点后两位(方法总结)
最简单使用: float i=1.6667f; string show=i.ToString("0.00"); //结果1.67(四舍五入) 其他类似方法: string show ...
- Nitrous.IO融资665万美元 帮助开发者省去配置调试等工作-CSDN.NET
Intro to Computer Science Class Online (CS101) - Udacity Building a Search Engine Nitrous.IO融资665万美元 ...
- Is it possible to implement a Firebug-like “inspect element” DOM element highlighter with client-side JavaScript?
Is it possible to implement a Firebug-like "inspect element" DOM element highlighter with ...
- spring集成mongodb封装的简单的CRUD
1.什么是mongodb MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. mongoDB MongoDB是一个介 ...
- android项目 之 记事本(12) ----- 图片的等比例缩放及给图片加入边框
本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...
- HTTPS 加密算法原理机制解析
当你在浏览器的地址栏上输入https开头的网址后,浏览器和服务器之间会在接下来的几百毫秒内进行大量的通信.InfoQ的这篇文章对此有非常详细的描述.这些复杂的步骤的第一步,就是浏览器与服务器之间协商一 ...
- CentOS下成功挂载xxxxxDVDx.iso并使用yum安装软件
CentOS下成功挂载xxxxxDVDx.iso并使用yum安装软件 **不断尝试,终能到达彼岸** 测试环境为Win7 32位,VirtualBOx4.2.16+CentOS6.5,可分别到virt ...
- java线程的使用(Runnable)
在实际项目开发过程中,线程是经常要用到的,特别是为了不影响项目的运行效果. 以下就以实际项目中的简单例子来介绍: public class SystemRedisInfoController exte ...
- 经典阅读-《Effective C++》Item1:视C++为一个联邦语言
C++已经是个多重范型编程语言(multiparadigm programming language),一个同时支持过程形式(procedural).面向对象形式(object-oriented).泛 ...
- Structs
1.服务端的运行程序 2.Servlet的三个方法 init service:抽象方法 destroy 3.步骤 (1).在web.xml中 <servlet> <servlet-n ...