html - 如何在 html 中创建自动调整列，其中无论列数如何都不会出现水平滚动条

Question

我正在尝试创建一个 html 结构，其中列容器根据没有水平滚动条的列数自动调整宽度。我尝试了各种在线资源，但未能创建一个。

是否有人创建了宽度根据列自动缩小的结构？

类似的东西

https://vladocar.github.io/infinity-css-grid/demo1.html

Answer 1

您可以使用 css 网格系统来达到所需的结果。假设您有以下 HTML 代码:

<div id="container" class=" col">
        <div class="element one">ONE</div>
        <div class="element two">TWO</div>
        <div class="element three">THREE</div>
        <div class="element four">Four</div>
</div>

然后你可以这样写你的CSS:

.element {
        padding: 1.5rem;
        border: 1px darkgray solid;
    }

    .one {
        background: rgb(121, 172, 74);
    }

    .two {
        background: rgb(71, 73, 190);
    }

    .three {
        background-color: rgb(148, 71, 71);
    }

    .four {
        background: rgb(151, 39, 142);
    }

    #container.col {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(45vh, 1fr));
        margin-top: 20px;
    }