float與position

時間 2019-11-16

標籤 float position 欄目 CSS 简体版

原文原文鏈接

使用float會使塊級元素的寬高表現爲包裹內容(在不設定寬高的狀況下) 這是固然的咱們使用float就是使幾個div排在一行固然不可能在寬度上撐滿父元素啦至於高度不論有沒有float 高度默認都是包裹元素的css

有這麼一道題html

現有並列的三列布局結構，從左至右依次爲 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>

相關標籤/搜索

assert&ctype&errno&float&limits

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。