使用display制作自动适应的两栏布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用display制作自动适应的两栏布局</title>
</head>

<body>
    <style type="text/css">
    div {
        border: 1px solid red;
    }
    
    .left {
        float: left;
        width: 200px;
    }
    
    .right {
        width: 2000px;
        display: table-cell;
    }
    </style>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

</html>

效果如下：

使用display制作自动适应的两栏布局
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用display table-cell实现 等高的两栏布局
    此文章是为了简单地实现等高的两栏布局，目标效果如下图1。下面将介绍3种实现方式（inline-block,tabl...
    faye0907阅读 2,707评论 1赞 3
  • 闲言---看病难
    医院对于每个人来说都息息相关，尤其是生活中更是离不开，前年几，因父母身体一直不好直到离世，往返各大...
    简静如水阅读 269评论 1赞 1
  • 五四诗会有感
    深夜叙事 这是在某个活动落下帷幕后的深夜。 作此文，以纪念。 这本是与我无关的一个活动，又或者说是我们学院丝毫不重...
    WEN馨阅读 630评论 0赞 0