如何模拟表格的流体单元格宽度但仍允许换行？答案

【问题标题】：How can I mimic a table's fluid cell width but still allow line wrapping?如何模拟表格的流体单元格宽度但仍允许换行？
【发布时间】：2026-01-29 04:40:02
【问题描述】：

我想在没有 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 自动宽度并仍然遵守我设置的最小/最大值？不幸的是 width: auto 只有在里面有内容使它变大时才会改变宽度。

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

【问题讨论】：

标签： html css layout

【解决方案1】：

你想要的是一个网格系统。供您参考：您可以按百分比设置 div 的宽度（基于父容器的宽度）。

如果您希望#prducts 中的所有<div> 元素为屏幕宽度的1/6，则应删除prducts 的宽度（将其设置为auto），然后执行以下操作：

#prducts > div {
   width: 16.666%;
}

除了#products 中的拼写错误，您应该知道您使用的是 id 标识符。您只能有一个 html 元素宽度为 id "products"。如果您打算拥有多个，则应将其更改为类名。我真的不明白你想在你的小提琴中做什么。出于布局原因，您不应使用表格。使用我的 anweser 和你的 fiddle，你会在 > div 项目的边距宽度上遇到问题，你可以很容易地避免使用基于框的布局。

【讨论】：

【解决方案2】：

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

【讨论】：