网页布局，左右分栏实现——原来是响应式的锅

最新推荐文章于 2024-05-14 09:55:02 发布

chudaxiakkk

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量3.1k

点赞数 1

本文链接：https://blog.csdn.net/chudaxiakkk/article/details/106218573

版权

个人博客踩坑之旅专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开发博客系统，现在要开发 “用户个人空间页”。
这次参考csdn的布局
在这里插入图片描述它是分左右两栏。

它是通过display：left 、 display：right来做左右的。
在我个人实践时，当缩小浏览器窗口，**右侧的文章栏会自动换行。**导致页面很难看

我是用bootstrap4 UI框架的。csdn很多页面也是用bootstrap4。
通过F12，可以看到class 确实是使用了container
在这里插入图片描述
但是，这里确实没有用到bootstrap4，而是自定义 响应式属性。
导致和我自己引入bootstrap4的冲突了。好久后才发现。

好。介绍一个csdn的个人空间页，是怎么做到左右分栏的。
以下是简化模型

<body style="background-color: #00ccff">
<div class="container clearfix">
    <aside style="float: left">111</aside>
    <main style="float: right">2222</main>
</div>
</body>
</html>
<style type="text/css">
    .container {
        padding: 0 24px 0;
        margin: 0 auto;
        -webkit-box-sizing: border-box;
    }
    @media screen and (max-width: 1366px) {
        .container {
            width: 1116px;
        }
    }
    @media screen and (min-width: 1366px) {
        .container {
            width: 1366px;
        }
    }

    .clearfix:after {
        content: '.';
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
    }
    aside {
        width: 300px;
        background: white;
        height: 200px;

    }
    main {
        background-color: #00cc00;
        height: 200px;
    }
    @media screen and (max-width: 1366px) {
        .container main {
            width: 760px;
        }
    }
    @media screen and (min-width: 1366px) {
        .container main {
            width: 1010px;
        }
    }
</style>

效果图
在这里插入图片描述
关键点在于 @media screen的处理

当屏幕像素大于等于1366px时，div的width是1366px
aside 的width是固定300px的，main 的宽度是1010px，
意味着 300 + 1010 = 1310。中间的间距必定就是56px
当屏幕像素大于小于1366px时，div的width是1116px
aside 的width是固定300px的，main 的宽度是760px，
意味着 300 + 760 = 1060。中间的间距必定就是56px

这样做的效果，就是假如屏幕尺寸比较小，比如是500px，那么并不会导致右侧栏换行，而是出现长度条。因为此时width是固定的。

在这里插入图片描述

chudaxiakkk

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
网页布局，左右分栏实现——原来是响应式的锅

开发博客系统，现在要开发 “用户个人空间页”。这次参考csdn的布局它是分左右两栏。它是通过display：left 、 display：right来做左右的。在我个人实践时，当缩小浏览器窗口，**右侧的文章栏会自动换行。**导致页面很难看我是用bootstrap4 UI框架的。csdn很多页面也是用bootstrap4。通过F12，可以看到class 确实是使用了container但是，这里确实没有用到bootstrap4，而是自定义响应式属性。导致和我自己引入bootstrap4的
复制链接

扫一扫