两列布局：左边固定宽度，右边自适应宽度，并且左边高度固定，右边自适应，两边的底边一直对齐

最新推荐文章于 2019-10-05 15:31:16 发布

大西瓜啃完了哟

最新推荐文章于 2019-10-05 15:31:16 发布

阅读量301

点赞数

本文链接：https://blog.csdn.net/haihiaandtongtong/article/details/79024393

版权

<style>
    body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, table, td, img, div {
        margin: 0;
        padding: 0;
        border: 0;
    }

    #left {
        float: left;
        width: 220px;
        background-color: green;
    }

    #content {
        background-color: orange;
        margin-left: 220px;
    }



    #content {
        min-height: 400px;
        width: 400px;
    }

    #left {
        min-height: 200px;
        height: auto !important;
        height: 200px;

    }

    .xian {
        width: 200px;
        height: 2px;
        background: red;
        float: left;
    }

    .xia {
        height: 2px;
        background: red;
        margin-left: 220px;
        width: 400px;
    }

</style>
<body>
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div class="xian"></div>
<div class="xia"></div>
</body>

大西瓜啃完了哟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两列布局：左边固定宽度，右边自适应宽度，并且左边高度固定，右边自适应，两边的底边一直对齐

style> body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, table, td, img, div { margin: 0; padding: 0; border: 0; } #left { float: left; width: 220
复制链接

扫一扫