html - 我怎样才能模仿表格的流体单元格宽度但仍然允许换行？

Question

我想在没有 JavaScript 的情况下执行此操作。我已经有一个 JS 解决方案，但想知道这是否可以用纯 CSS 实现。

假设您有一个展示产品的页面。当页面调整大小时，我想让那些产品框随着页面布局而变化。每个都应该有最大宽度和最小宽度。表格不起作用，因为我不能有固定数量的列。根据浏览器的宽度，一行中可能有 1 到 6 个产品。以下不起作用，但这是我所得到的最接近的。

#prducts > div {
    float: left;
    max-width: 200px;
    width: auto;
    min-width: 100px;
    background-color: #3333FF;
    height: 250px;
    margin: 5px;
}

这是 fiddle :http://jsfiddle.net/79CBq/2/

是否可以让 DIV 自动调整宽度并仍然遵守我设置的最小/最大值？不幸的是，width: auto 仅在内部有内容时才更改宽度，使其变大。

这对我来说真的很愚蠢，因为带有“显示: block ”的 DIV 具有正确的自动宽度类型，但我找不到将其提供给内联 block 或 float DIV 的选项。

Answer 1

你想要的是一个网格系统。供您引用:您可以按百分比设置 div 的宽度(基于父容器的宽度)。

如果你想要所有<div> #prducts 中的元素为屏幕宽度的 1/6，您应该删除 prducts 的宽度(将其设置为 auto )然后执行此操作:

#prducts > div {
   width: 16.666%;
}

除了#products 中的拼写错误外，您应该知道您使用的是 id 标识符。您只能有一个 html 元素宽度为 id“products”。如果您打算拥有多个，则应将其更改为类名。我真的不明白您想在 fiddle 中做什么。出于布局原因，您不应使用表格。使用我的答案和你的 fiddle ，你会遇到宽度为 > div 的问题。元素，您可以使用基于框的布局轻松避免这些元素。