CSS:兩欄佈局

weixin_34337265發表於2018-05-02
CSS

1.直接float:left;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrapper{
                width:100%;
            }
            .left{
                width:120px;
                float:left;
                background-color:lightpink;
            }
            .right{
                background-color:#FF6C60;
            }
        </style> 
    </head>
    <body>
        <div class="wrapper" id="wrapper">
            <div class="left">
                左邊固定寬度，高度不固定 </br> </br></br></br>高度有可能會很小，也可能很大。
            </div>
            <div class="right">
                這裡的內容可能比左側高，也可能比左側低。寬度需要自適應。</br>
                基本的樣式是，兩個div相距20px, 左側div寬 120px
            </div>
        </div>
    </body>
</html>

2.absolute+margin-left；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .parent{
                width:100%;
                position:relative;
            }
            .left{
                width:100px;
                height:200px;
                background-color:cornflowerblue;
                position:absolute;
            }
            .right{
                width:100%;
                height:300px;
                background-color:palevioletred;
                margin-left:100px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>
</html>

3.使用float:left+margin-left:-aside子元素寬度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            #header,#footer{
                width:100%;
                height: 100px;
                overflow: hidden;/*觸發BFC*/
                background-color:#CCCCCC;
            }
            #main .center{
                height: 200px;
                width: 100%;
                float: left;
            }
            #main .center .content{
                width:100%;
                height:200px;
                background-color:#FF6600;
                margin-right:100px;
            }
            #main .aside{
                width:100px;
                height:200px;
                margin-left:-100px;
                background-color: #FF0000;
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="header">header</div>
        <div id="main">
            <div class="center">
                <div class="content">
                    我是主區塊 我是主區塊 main main  main
                </div>
            </div>
            <div class="aside"></div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

注意：設定浮動，center設定寬度為100%，需要優先渲染，要寫在前面；

4.使用float+overflow

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrapper {
                padding: 15px 20px;
                border: 1px dashed #ff6c60;
            }
            .left {
                width: 120px;
                margin-right:20px;
                float:left;
                border: 5px solid #ddd;
            }
            .right {
                overflow:hidden;
                border: 5px solid #ddd;
            }
        </style> 
    </head>
    <body>
        <div class="wrapper" id="wrapper">
            <div class="left">
                左邊固定寬度，高度不固定 </br> </br></br></br>高度有可能會很小，也可能很大。
            </div>
            <div class="right">
                這裡的內容可能比左側高，也可能比左側低。寬度需要自適應。</br>
                基本的樣式是，兩個div相距20px, 左側div寬 120px
            </div>
        </div>
    </body>
</html>

5.使用flex+flex:1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrapper{
                width:100%;
                display:flex;
                position:absolute;
                top:0;
                bottom:0;
                /*align-items: stretch;*/
            }
            .left{

                /*flex:0 0 auto;*/
                background-color:#FF6C60;
            }
            .right{
                flex: 1;
                background-color:#FF0000;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="left">我是左邊</br>啦啦啦啦啦啦</div>
            <div class="right">我是右邊</div>
        </div>
    </body>
</html>
注意：display：flex；預設align-items:stretch（拉伸）;所有子元素的高度為元素的最高高度；flex:1;即{flex-grow:1;flex-shrink:1;flex-basis:0%;}

相關文章