阅读 369

实现一个不规则的布局(flex、浮动)

布局如图

flex实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用flex实现,侧栏固定宽度</title>
    <style>
        html, body, p {
            padding: 0;
            margin: 0;
        }
        section {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
        }
        section div {
            flex: 1;
        }
        .header {            
            height: 70px;
            background: red;
        }
        .footer {            
            height: 70px;
            background: #808080;
        }

        .sidebar {        
            flex: 0 0 200px;  /* 固定宽度,不需要缩放 */    
            height: 300px;
            background: green;
        }

        .ads {
            height: 200px;
            background: #DDDDDD;
        }
        .conve {
            flex: 0 0 100px;  /* 固定宽度,不需要缩放 */    
            height: 300px;
            background: yellow;
        }
        .main {
            height: 100px;
            color: #fff;
            background: black;
        }        
        .inner-box {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
        }
        .inner-box .nav {        
            flex: 1 0 100%;    
            height: 100px;
            background: orange;
        }
        .inner-box .conve {
            flex: 0 0 200px;
        }
        .inner-box .ads {
            flex-grow: 1;
        }
        .inner-main {
            display: flex;
            flex: 1;
            flex-direction: column;
        }
        .inner-main .main {
            margin-left: -200px; /* 200px是sidebar的width */
        }
    </style>
</head>
<body>

    <div class="header"><p>header</p></div>
    <section>
        <div class="sidebar">
            <p>sidebar</p>
            <p>固定宽度,200px</p>
            <p>nav,ads, conve, main都属于子容器inner-box</p>
        </div>

        <!-- inner-box整个容器会自适应sidebar之外的空间 -->
        <div class="inner-box">
            <div class="nav">
                <p>nav</p>
                <p>父容器为inner-box, 自适应宽度,占满inner-box的一行</p>
                <p>ads, main属于孙容器inner-main</p>
            </div>

            <!-- 由于为父容器inner-box设置了换行,nav占了一行,所以inner-main会换行 -->
            <!-- 占满除去conve固定宽度的其余空间 -->
            <div class="inner-main">
                <div class="ads">
                    <p>ads</p>
                    <p>自适应宽度,在容器inner-main中,设置了垂直布局,所以ads会占满这一行</p>
                </div>


                <div class="main">
                    <p>main</p>
                    <p>main在容器inner-main中,所以填满也只有inner-main的宽度(也就是和ads一样宽),设置其margin-left为
                     sidebar的宽度的负值,自身自适应宽度,就可以填补sidebar下面的空白区,达到效果</p>
                </div>
            </div>        

            <!-- 和inner-main在同一行 -->
            <div class="conve">
                <p>conve</p>
                <p>固定宽度,200px</p>
            </div>
        </div>        
    </section>
    <div class="footer"><p>footer</p></div>

</body>
</html>复制代码

浮动实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动布局,侧栏固定宽度</title>
    <style>
        html, body, p {
            margin: 0;
            padding: 0;
        }
        .header {
            height: 50px;
            width: 100%;
            background: red;
        }
        .wraper {
            overflow: hidden;
        }
        .sidebar {
            float: left;
            width: 200px;
            height: 300px;
            background: green; 
        }
        .nav {
            overflow: hidden;
            height: 100px;
            background: #F6A428;
        }
        .inner-box .ads {
            overflow: hidden;
            height: 200px;
            background: #DDDDDD;
        }
        .inner-box .conve {
            float: right;
            width: 200px;
            height: 400px;
            background: yellow;
        }
        .main {    
            overflow: hidden;
            height: 200px;
            color: #fff;
            background: black;
        }
        .footer {
            float: left;
            clear: both;
            height: 100px;
            width: 100%;
            background: #808080;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header"><p>header</p></div>
        <div class="wraper">
            <div class="sidebar">
                <p>sidebar</p>
                <p>左浮动,固定宽度200px</p>
            </div>
            <div class="nav">
                <p>nav</p>
                <p>overflow:hidden; 实现BFC,不会被浮动的sidebar遮挡,紧随其后</p>
            </div>
            <div class="inner-box">                
                <div class="conve">
                    <p>conve</p>
                    <p>右浮动,固定宽度200px</p>
                </div>
                <div class="ads">
                    <p>ads</p>
                    <p>ads,conve,main放在一个div里面</p>
                    <p>ads设置overflow:hidden;实现BFC,自适应剩下的宽度,不会被左浮动的sidebar和右浮动的conve遮挡</p>
                </div>
                <div class="main">
                    <p>main</p>
                    <p>overflow:hidden;紧随右浮动的conve,自适应剩下的宽度</p>
                </div>
            </div>
        </div>
        <div class="footer"><p>footer</p></div>
    </div>
</body>
</html>复制代码

关注下面的标签,发现更多相似文章
评论