前端学习之CSS---两栏布局、三栏布局_关于前端页面布局左二部分中三右二怎么实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45258154/article/details/125064075

本文详细介绍了前端开发中的CSS布局技术，包括如何实现两栏布局，分别探讨了使用margin-left和calc(100% - 宽度)的方法。此外，还涵盖了三栏布局的实现，通过清除样式、设置html高度和调整div布局来完成上、中（左、中、右）、下布局的构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、两栏布局

1、清样式、设置html高度

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

2、设置两个div

方案1：margin-left

<style>
    .box1{
        width:200px;
        height:100%;
        background:red;
        float:left;
    }
    .box2{
        height:100%;
        background:yellow;
        margin-left:200px;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

方案2：calc(100% - 200px)

<style>
    .box1{
        width:200px;
        height:100%;
        background:red;
        float:left;
    }
    .box2{
        height:100%;
        width:calc(100% - 200px);
        background:yellow;
        float:left;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

二、三栏布局

1、清样式、设置html高度

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

2、设置div

上、中（左、中、右）、下布局

<style>
    .top,.bottom{
        width:100%;
        height:50px;
        background:gray;
    }
    .middle{
        width:100%;
        height:calc(100% - 100px);
        
    }
    .left,.right{
        width:100px;
        height:100px;
        background:red;
    }
    .center{
        width:calc(100% - 200px);
        height:100%;
        background:blue;
        float:left;
    }
</style>

<body>
    <div class="top"></div>
    <div class-"middle">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>