时间戳

首页 > 解决方案 > 真正响应式的内容栏，带有侧边栏，没有媒体查询

css - 真正响应式的内容栏，带有侧边栏，没有媒体查询

问题描述

我正在尝试使用内容框（有 3 列）和侧边栏来制作响应式基本布局。我目前遇到的问题是在侧边栏位于右侧以及侧边栏位于网格下方时定义边距。目前，我没有边距，但我想在侧边栏位于右侧时有 20px（例如）边距，在侧边栏位于网格下方时有 50px（或 20px，所以它是相同的）。在新行上时也.sidebar应该是全宽。这是我的代码：

    <!DOCTYPE html>
<html>
    <head>
        <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;">
    </head>
    <body>
        <style>
            .main {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                background: yellow;
            }
            .main .six-col {
                flex: 1 1 auto;
                display: grid;
                justify-content: space-between;
                column-gap: 15px;
                background: red;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
            .main .six-col .col { border: 1px white solid;}
            .main .sidebar {
                flex: 0 0 250px;
                background: green;
            }
        </style>
        <div class="main">
            <div class="six-col">
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
            </div>
            <div class="sidebar">
                sidebar
            </div>
        </div>
    </body>
</html>

这可以在没有媒体查询的情况下实现吗？

标签： cssresponsive-designresponsivemedia

解决方案

您可以执行以下操作：

  • 为容器添加负边距，为.main子项添加正边距，如下所示：
.main {
    /* ... other stuff ... */
    margin-top: -20px;
    margin-left: -20px;
}
.main > * {
    margin-top: 10px;
    margin-left: 10px;
}

.sidebar当您的尚未包装和包装时，这将为您提供余量.sidebar。

  • 此外，您可以添加一个 flexbox 属性以使包裹的.sidebar拉伸跨越父级的整个宽度：
.main .sidebar {
    /* ... other stuff ... */
    flex-grow: 1;
}

因此，您总共将拥有以下内容：

<!DOCTYPE html>
<html>
    <head>
        <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;">
    </head>
    <body>
        <style>
            .main {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                background: yellow;
                /* for spacing between sidebar and the six columns container */
                margin-top: -20px;
                margin-left: -20px;
            }
            .main > * {
                /* for spacing between sidebar and the six columns container */
                margin-top: 10px;
                margin-left: 10px;
            }
            .main .six-col {
                flex: 1 1 auto;
                display: grid;
                justify-content: space-between;
                column-gap: 15px;
                background: red;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
            .main .six-col .col { border: 1px white solid;}
            .main .sidebar {
                flex: 0 0 250px;
                /* for stretching the wrapped sidebar */
                flex-grow: 1;
                background: green;
            }
        </style>
        <div class="main">
            <div class="six-col">
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
            </div>
            <div class="sidebar">
                sidebar
            </div>
        </div>
    </body>
</html>

编辑 1

我使用gap“多列、弹性和网格布局”的属性找到了一个更清洁、更简单的解决方案（参见：https ://www.w3.org/TR/css-align-3/#gaps ）：

<!DOCTYPE html>
<html>
    <head>
        <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;">
    </head>
    <body>
        <style>
            .super-main {
                margin: auto;
                max-width: 1200px;
                padding: 50px;
                background-color: #FFD700;
            }
            .main {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                background: yellow;
                row-gap: 15px;
                column-gap: 15px;
            }
            .main .six-col {
                flex-grow: 3;
                display: grid;
                justify-content: space-between;
                column-gap: 15px;
                background: red;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
            .main .six-col .col {
                border: 1px white solid;
            }
            .main .sidebar {
                flex-basis: 250px;
                flex-shrink: 1;
                /* for stretching the wrapped sidebar */
                flex-grow: 1;
                background: green;
            }
        </style>
        <div class="super-main">
            <div class="main">
                <div class="six-col">
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                </div>
                <div class="sidebar">
                    sidebar
                </div>
            </div>
        </div>
    </body>
</html>

推荐阅读