仅使用 css 的响应式网格列表答案

【问题标题】：Responsive grid list only with css仅使用 css 的响应式网格列表
【发布时间】：2015-12-16 17:57:45
【问题描述】：

如何仅使用 css 为此类简单文本构建响应式网格列表？

这里是一个例子：www.jsfiddle.net/kodjoe/4aj63pkk/

【问题讨论】：

标签： html css list responsive-design grid

【解决方案1】：

当你想做一个响应式网格时，你必须使用 % 作为宽度和高度。然后，当您缩小屏幕时，宽度将尊重屏幕的百分比。因此，使用您的类 .thumbnail 您应该删除以像素为单位的最大宽度和最小宽度或将像素更改为百分比。

.thumbnail {
    display: inline-block;
    width:80%;
    margin-right:20px;
}

创建你的 ow css 网格

grid.css

[class^='col-'] {
    float: left;
    padding: 0;
    text-align: center;
}

.col-1of4 {
    width: 25%;
}

.col-1of3 {
    width: 3.33%;
}

*, *.after, *.before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.grid:after {
    content: " ";
    display: block;
    clear: both;
}

index.html

<div class="grid">
    <div class="col-1of3">
        <p> First Row </p>
    </div>
    <div class="col-1of3">
        <p> Second Row </p>
    </div>
    <div class="col-1of3">
        <p> Third Row </p>
    </div>
</div>

col-1of3 是一个宽度为 33.33 的列。如果你想要 4 列，你只需计算屏幕大小等于 100% 除以 4 列。如果你把网格放在一个 body 里面，那么它会将 body 作为 100%。

如果你想知道grid.css和index.html文件中每一行的作用，这里有一个视频https://www.youtube.com/watch?v=kCNz7Blg9yM

【讨论】：

权利现在已更新；D，我怎样才能只使用 css 并从引导程序中删除 css 部分？
如果您想在不使用引导程序的情况下拥有完整的 css 网格，您必须创建一个 css 文件调用 grid.css 并在文件中放置以下内容，请参阅我编辑的答案@fatyfatoumata

【解决方案2】：

您提供的示例响应页面宽度，但仅以 4 个为一组。我假设这就是您想要的。

为此，在单个 div 中插入 4 个元素并将 div 的显示设置为 inline-block。默认情况下，div 元素被设置为阻塞，无论它有多大，都会占据整个页面宽度。

【讨论】：

嗯嗯这就是我所做的；谢谢你的逻辑！！