使用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的更多相关文章

  1. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  2. float和position谁好？

    float从字面上的意思就是浮动,float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.不过需要注意的是清除浮动是我们可能需要注意的地方.而position ...

  3. CSS布局模型学习(Float、Position、Flexbox)

    一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...

  4. inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题

    我们知道内联元素是不能设置宽.高的,但是一旦使其脱离了文档流,就可以了,这是因为它已经变成了块级元素. 例1: <!DOCTYPE html> <html lang="en ...

  5. CSS 盒子模型及 float 和 position

    ## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...

  6. CSS 中，用 float 和 position 的区别是什么？

    CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...

  7. float与position间的区别

    float与position间的区别:    个人理解为:脱离文档流不一定脱离文本流:但脱离文本流,则也脱离文档流.[如有更好的理解还望评论区一起探讨,共同学习进步]一.float 浮动(脱离文档流, ...

  8. float和position:absolute脱离文本流的区别

    float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成 ...

  9. [转][译]关于CSS中的float和position和z-index

    原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...

  10. CSS：布局的三个关键属性：float、position、display

    最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...

随机推荐

  1. Stitch Fix 融资1200万美元，又一个时尚创业的哈佛女MBA |华丽志

    Stitch Fix 融资1200万美元,又一个时尚创业的哈佛女MBA |华丽志 Stitch Fix 融资1200万美元,又一个时尚创业的哈佛女MBA

  2. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  3. cc150:实现一个算法来删除单链表中间的一个结点，仅仅给出指向那个结点的指针

    实现一个算法来删除单链表中间的一个结点,仅仅给出指向那个结点的指针. 样例: 输入:指向链表a->b->c->d->e中结点c的指针 结果:不须要返回什么,得到一个新链表:a- ...

  4. PDFium-PDF开源之旅(1)-初探代码下载编译

    近日,Google和Foxit合作开源了Foxit的PDF源代码. 叫PDFium 相关新闻不少.哈,虽说已经不是程序猿了.只是还是有兴趣跑起来围观看看.废话少说.先说编译代码的步骤(事实上Googl ...

  5. js柯里化的一个应用

    听到同学说面试一道题目 add(1)(2)(3)(4); 查询了下资料  这是一个js里面的柯里化 现象 add_curry防范返回的是一个 retVal,并不是执行结果.这里的代码很想递归,但是不是 ...

  6. VS2015+MySql EF的配置问题

    自己做笔记,防止以后各种找! 去MySql下载最新版的安装包,MySql For Windows全部就可以了,根据开发需求安装功能,然后安装MySql的步骤上网去找一大堆. 注意事项: 第一:必须把V ...

  7. C3p0实践

    jar包 c3p0-0.9.2.1.jar mchange-commons-java-0.2.3.4.jar mysql-connector-java-5.1.28-bin.jar 建立数据库 CRE ...

  8. C++ : 类型的别名和对象的别名

    #include <iostream>using namespace std; class human{public:    void Talk();    ~human(){cout&l ...

  9. android中像素单位dp、px、pt、sp的比较

    dp(dip): device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖 ...

  10. 【转载】关于Python脚本开头两行的：#!/usr/bin/python和# -*- coding: utf-8 -*-的作用 – 指定文件编码类型

    1.#!/usr/bin/python 是用来说明脚本语言是 python 的 是要用 /usr/bin下面的程序(工具)python,这个解释器,来解释 python 脚本,来运行 python 脚 ...