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>

 

posted @ 2014-03-11 13:28  cart55free99  阅读(191)  评论(0)  编辑  收藏  举报