html – 在不设置父宽度的宽度的元素的中心流体网格

我想将一个“网格”的元素集中在一起 – 当调整大小调整为中心时.

喜欢这个：

___________________
|                   |
|    [] [] [] []    |
|    [] [] [] []    |
|    [] [] []       |
 -------------------
 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    []       |
 -------------

我已经尝试设置最大宽度,但是当调整大小时会导致此问题：

________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| []          |
 -------------

我不考虑使用媒体查询和设置硬宽度(甚至最大宽度)为每个配置一个真正的解决方案.

只要它优雅地降级,我开放给CSS3,并希望避免使用javascript.

编辑：添加非语义元素也是一个交易破坏者,一个容器div或一些可以通过,但不是理想的.

标注如下：

<ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
 </ul>

这是一个demo让你开始.

谢谢.

解决方法

对于您的确切要求,您仍然有一些模糊的内容(如上所述,所有上面的插图都显示了偶数个元素,所以我不知道你对奇数的期望,在你的小提琴中,我刚刚添加了一个text-align：中心到ul并实现了一个居中的效果( http://jsfiddle.net/nR9Mk/1/),但我不知道它是否按照你的愿望行事.

更新：如果你只是处理数字,你希望他们按照两人分组,那么这将工作：http://jsfiddle.net/nR9Mk/8/.

第2轮：根据您所揭示的“奇数”要求,我提出了一个可行的解决方案.注意：1)它需要一些额外的HTML标记,2)你必须设置一些类型的实际限制,你想要走多远,仍然得到效果. Here是通过轮廓显示的“缓冲区”元素的代码,here是删除轮廓的.

第3轮：我知道你已经接受了我的答复,但是我已经在这个工作了,所以我想我会提供它.根据您的交易破产者评论,here is a modified plan可能对您(或其他人)有用.它是一种混合动物 – “有时”它推动剩下的元素(通常当它最不尴尬的时候),有时候让他们保持“离开”,但是居中.为了保持它从一开始看起来很简单的“奇怪”,它的最大宽度为六列宽.

原文地址：https://www.jb51.cc/html/224529.html