CSS 3栏自适应布局

时间：2023-03-09 00:29:49
CSS 3栏自适应布局

绝对定位

css

        html,body{margin: 0px;height:100%;}

        div{height: 100%;}

        .left,.right {top: 0px;position: absolute;width: 200px;background-color: black;}

        .left {left: 0px;}

        .right {right: 0px;}

        .center {margin: 0px 200px;background-color: red;}

html

        <div class='left'></div>

        <div class="center"></div>

        <div class='right'></div>

浮动

css

        html,body{margin: 0px;padding: 0px;height:%;}

        div{height:%;}

        .left,.right {width: 200px;background-color: black;}

    　　 .left {float: left;}

        .right {float:right;}

    　　.center {margin: 0px 200px;background-color: red;}

html

        <div class='left'></div>

        <div class='right'></div>

        <div class="center"></div>

　　

相关文章