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;
}

这是小提琴：http://jsfiddle.net/79CBq/2/

是否可以让DIV执行自动宽度并仍然符合我设置的最小/最大值？不幸的是宽度：自动只会改变宽度，如果有内容使其变大。

这对我来说真的很愚蠢，因为带有“display：block”的DIV具有正确的自动宽度，但我找不到将其赋予内联块或浮动DIV的选项。

Answer 1

你想要的是一个网格系统。有关您的信息：您可以设置div的宽度百分比（基于父容器的宽度）。

如果您希望<div>中的所有#prducts元素都是屏幕宽度的1/6，则应移除prducts的宽度（将其设置为auto）然后这样做：

#prducts > div {
   width: 16.666%;
}

除了#products中的拼写错误，你应该知道你正在使用id标识符。你只能有一个html元素宽度id“products”。如果您计划有多个，则应将其更改为类名。我并不是真的想知道你想要做什么。出于布局原因，不应使用表。使用我的anweser和你的小提琴，你会遇到问题宽度> div项的边距，你可以轻松避免使用基于框的布局。

Answer 2

您可以使用bootstrap网格系统，bootstrap负责媒体查询。您需要根据列宽和要支持的屏幕给出div类，例如“col-md-”。如果您不想使用完整的库，则可以模拟用于流体布局的引导实现。 http://getbootstrap.com/css/

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

2 个答案: