css - n 列随机高度 portlet 的响应式网页设计

Question

简要说明:

我如何在 CSS 中布置 N 列随机高度的 portlet，以便在调整浏览器大小时减少列数(使用 @media (min-width:))并且 portlet 仍然很好地放在一起没有空白的页面。

这类似于 Float multiple fixed-width / varible-height boxes into 2 columns但更一般。

详细信息:

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

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

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

Answer 1

结合使用媒体查询和文本对齐来实现这一点:

In its natural state, ‘text-align: justify’ will not work unless the contents of the line are long enough to cause a line-break. Otherwise, the text remains left aligned. We can solve this problem by giving 100% width to an invisible inline element at the end of the line.

Because ‘text-align: justify’ is designed to work on individual inline words, it works on any inline element—and more importantly any inline-block element.

To account for any and all possible numbers of elements on the last row, the number of “placeholder” elements you will need to add is equal to the maximum number of elements per row, minus 2. These elements should be inserted at the end of your grid (before the “break” element if you are not using a pseudo-element to break the row) and then left alone. Since they do not occupy any vertical space, the “placeholder” elements won’t affect the layout if the last row is full or if your site is responsive and the number of elements per row changes. As long as you have enough placeholders for the widest view, you’ll be fine.

Obviously, this has some semantic implications—as there is no way to create any of these placeholders using pseudo-elements. On a grid where the last row will always have the maximum number of elements, we don’t need to use placeholders at all (just a break), but in most CMS situations they are necessary, and should be hard-coded into your HTML.

By simply applying ‘text-align: justify’ to the container, and giving the child elements ‘display: inline-block’ and a percentage width, you’ll never have to deal with horizontal margins ever again! (Oh and did I mention, when using this trick, you’ll also never need to use float on your elements ever again, so you can wave goodbye to those ignominious clearfixes and clear divs too!)

We should be aware that when using ‘display: inline-block’, our elements will be at the mercy of various typographic CSS properties, including font-size, line-height, vertical-align and word-spacing. These properties will have a visible affect on your layout’s whitespace, but can be easily adjusted or removed as needed. In 99% of cases, setting ‘font-size: 0.1px;’ to the container and ‘vertical-align: top’ to the child elements should do the trick.

引用资料

• Using text-align: justify for Layout

• Swipe Me Responsive Slideshow

• Text-align Justify and Responsive Web Design

• Zoom for fixed and responsive sites | AlastairC