Question

假设我有以下HTML

<div class="option">
    <input type="checkbox" />
    <label>Checkbox</label>
</div>
<div class="option">
    <input type="checkbox" />
    <label>Checkbox with longer text</label>
</div>
<div class="option">
    <input type="checkbox" />
    <label>Cbox</label>
</div>
etc...

jsFiddle

我想在类似表格的网格中显示这些div。它必须是响应式的，并且所有列都应具有相同的宽度。

例如，当父级的宽度为1000px，宽度最大的div为300px时，我希望显示3列，每列宽度为300px。当父级宽度为600px，宽度最大的div为300px时，我希望显示2列宽度，宽度为300px。等等。

请注意，这些div的宽度可能会发生变化，因为内容是从数据库中检索的。

我读到了可以做到这一点的框架，但我不需要为我网站的这一小部分提供一些花哨的框架。

你会怎么做？

Answer 1

您只需要创建响应式布局。很少有事情需要考虑

DIV是一个块级元素，为了响应，你必须做到 inline-block。
以百分比形式给出所有宽度和高度，以便随着屏幕尺寸的变化自动调整。
任何固定的宽度或高度都应该给予父母。

请参阅以下小提琴，您可以尝试调整浏览器大小以查看响应速度。

http://jsfiddle.net/yKA8a/embedded/result/

现在可以使用可变数量的网格。您需要媒体查询。请看下面的小提琴。

http://jsfiddle.net/yKA8a/3/embedded/result/

Answer 2

我决定只使用宽度。如果有人有兴趣：

.option{
    width:50%;
    float:left;
}

jsFiddle

Answer 3

您想知道如何从响应式网页设计开始吗？

阅读Ethan Marcotte撰写的“响应式网页设计”，因为我们无法向您介绍设计和编写响应式网站的所有内容:)

CSS：如何在没有框架的情况下制作响应式网格

3 个答案: