float/inline-block/flex实现三栏布局（可水平、垂直居中，带效果图）

最新推荐文章于 2024-07-28 14:30:00 发布

LitStronger

最新推荐文章于 2024-07-28 14:30:00 发布

阅读量774

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_43641850/article/details/105261538

版权

本文介绍了三种实现三栏布局的方法：浮动布局、inline-block方式和Flex布局。每种方法都展示了窗口最大化和缩小化的效果，并探讨了它们的特点和适用场景。使用Flex布局时，内容可以灵活地水平和垂直居中，而在窗口缩小后，布局依然能保持良好的响应性。

摘要由CSDN通过智能技术生成

三栏浮动布局

浮动的方式有很多种，比如像下面这个例子，是把左右两个板块固定大小和位置，中间自适应。
先看效果

窗口最大化

在这里插入图片描述

缩小化

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏浮动布局</title>
    <style type="text/css">
        .wrapper{
            width: 100%;
            height: calc(100vh);
            background-color: bisque;
            box-sizing: border-box;
        }
        .wrapper .left {
            width: 200px;
            height: 300px;
            background: #faa;
            float: left;
        }
        .wrapper .right {
            width: 200px;
            height: 300px;