1

简要地：

如何在 CSS 中布置 N 列随机高度的 portlet，以便如果调整浏览器大小，减少列的数量（使用 @media (min-width:)）并且 portlet 仍然很好地放在页面上没有间隙。

这类似于将 多个固定宽度/可变高度框浮动到 2 列中 ，但更通用。

细节：

我已经构建了一个 Web 应用程序（PHP / Zend 框架），其中包含一个由一系列 portlet 组成的“仪表板”页面。Portlet 可以在流畅的布局中排列成 1、2、3 或 4 个等宽列（用户可选择）。当用户调整浏览器窗口的大小时，列会扩展以填充可用宽度，portlet 也会水平扩展。每个 portlet 的垂直高度由其内容定义。有些只有 1-2 行，有些可以是 30-40+ 行的文本/表格/图像等。

我想把它变成“响应式设计”，这样用户就不必选择列数。在小屏幕（例如 iPhone）上，只会显示一列。在宽屏幕上，它们可能有 4 或 5 列。如果调整浏览器窗口的大小，列数将向上或向下调整以允许 portlet 保持大约 300-400 像素宽。

我想我可以用一点 jQuery 和一些服务器端支持 (PHP) 来做到这一点，但如果可能的话，我更愿意在 CSS 中完成这一切（没有/最少的 javascript）。

4

1 回答 1

0

使用媒体查询和文本对齐的组合来实现这一点：

在其自然状态下，'text-align: justify' 将不起作用，除非该行的内容长到足以导致换行。否则，文本保持左对齐。我们可以通过在行尾给一个不可见的内联元素 100% 宽度来解决这个问题。

因为 'text-align: justify' 被设计用于单个内联单词，它适用于任何内联元素——更重要的是任何内联块元素。

考虑到最后一行上任何和所有可能的元素数量，您需要添加的“占位符”元素的数量等于每行的最大元素数量减去 2。这些元素应插入到末尾您的网格（如果您不使用伪元素来打破行，则在“break”元素之前），然后不理会。由于它们不占用任何垂直空间，因此“占位符”元素不会影响布局，如果最后一行已满或您的网站是响应式的并且每行的元素数量发生变化。只要您有足够的占位符来获得最广阔的视野，就可以了。

显然，这有一些语义含义——因为没有办法使用伪元素创建任何这些占位符。在最后一行将始终包含最大元素数量的网格上，我们根本不需要使用占位符（只是一个中断），但在大多数 CMS 情况下它们是必要的，并且应该硬编码到您的 HTML 中.

通过简单地对容器应用'text-align: justify'，并给子元素'display: inline-block'和一个百分比宽度，你再也不用处理水平边距了！（哦，我有没有提到，当使用这个技巧时，你再也不需要在你的元素上使用 float，所以你也可以向那些可耻的 clearfixes 和 clear divs 挥手告别！）

我们应该知道，当使用'display: inline-block'时，我们的元素将受制于各种排版CSS属性，包括字体大小、行高、垂直对齐和字间距。这些属性将对布局的空白产生明显影响，但可以根据需要轻松调整或删除。在 99% 的情况下，设置 'font-size: 0.1px;' 到容器和 'vertical-align: top' 到子元素应该可以解决问题。

参考

于 2013-12-05T02:52:21.293 回答