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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/html/224529.html

猜你在找的HTML相关文章