中心流体网格元素，而不在父级上设置硬宽度 [英] Center fluid grid of elements without setting hard width on parent
问题描述
像这样：
___________________
| |
| [] [] [] []
| [] [] [] []
| [] [] [] |
-------------------
________________
| |
| [] [] [] |
| [] [] [] |
| [] [] [] |
| [] [] |
----------------
_____________
| |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] |
-------------
我试过设置 max-width ，但调整大小后会导致此问题：
________________
| |
| [] [] [] |
| [] [] [] |
| [] [] [] |
| [] [] |
----------------
_____________
| |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] |
-------------
我不考虑使用媒体查询并为每个配置设置硬宽度（或甚至 max-width ）。
我对CSS3开放，只要它适度降级，并且想避免javascript。
：添加非语义元素也是一个交易破坏者，一个容器 div 或者某些东西可以通过但不理想。
标记应如下：
< ul>
< li> ...< / li>
< li> ...< / li>
< li> ...< / li>
< / ul>
这里是演示。
谢谢。
对于你的中心位置，你的确切要求还是有点含糊，因为你上面的所有插图都显示了偶数个元素，所以我不知道你对奇数的期望。我只是添加 text-align：center 到 ul 并实现了一个居中效果=http://jsfiddle.net/nR9Mk/1/> http://jsfiddle.net/nR9Mk/1/ ），但我不知道它是否如你所愿。 p>
更新：如果你只处理偶数，而你希望他们保持分组，那么这将工作：http://jsfiddle.net/nR9Mk/8/ 。
ROUND 2 ：根据您发现的奇数要求，我提出了一个有效的解决方案。注意：1）它需要一些额外的HTML标记，2）你必须设置一些类型的实际限制，你想要走多远，仍然得到的效果。 这里是由大纲显示的缓冲元素的代码。和此处的大纲已删除。
ROUND 3 ：我知道你已经接受了我的答案，但我已经在这个工作，所以我想我会提供它。根据您的交易中断者评论，这里是一个修改的计划，可能对您（或其他人）有用。它是一个混合 - 有时它推动元素左（通常当它是最尴尬的不），有时让他们保持离开列，但居中。为了防止它看起来很奇怪，它给出了一个宽度为6列的 max-width 。
I'd like to center a 'grid' of elements that—when resized—adjusts to center itself.
Like this:
___________________
| |
| [] [] [] [] |
| [] [] [] [] |
| [] [] [] |
-------------------
________________
| |
| [] [] [] |
| [] [] [] |
| [] [] [] |
| [] [] |
----------------
_____________
| |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] |
-------------
I've tried setting a max-width, but that leads to this problem when resized:
________________
| |
| [] [] [] |
| [] [] [] |
| [] [] [] |
| [] [] |
----------------
_____________
| |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] [] |
| [] |
-------------
I do not consider using media queries and setting hard widths (or even max-widths) for every configuration a real solution.
I am open to CSS3 as long as it degrades gracefully, and would like to avoid javascript.
Edit: Adding non-semantic elements is also a deal breaker, a container div or something would be passable but not ideal.
The markup should be as follows:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Here is a demo to get you started.
Thank you.
It's still a little vague as to what your exact requirements are for centering (as in, all your illustrations above show an even number of elements, so I don't know what you expect for odd number. In your fiddle, I just added a text-align: center to the ul and achieved a centering effect ( http://jsfiddle.net/nR9Mk/1/ ), but I don't know if it is behaving as you desire.
Update: If you are only dealing with even numbers and you want them to remain grouped by two's, then this would work: http://jsfiddle.net/nR9Mk/8/.
ROUND 2: Based on your revealed "odd number" requirements, I have come up with a solution that works. Note: 1) it does require some extra HTML markup, 2) you have to set some type of practical limit to how wide you want to go and still get the effect. Here is the code with the "buffer" elements revealed by an outline and here is it with the outline removed.
ROUND 3: I know you already accepted my answer, but I was already working on this, so I figured I would offer it anyway. Based on your deal breaker comment, here is a modified plan that may be useful for you (or someone else). It is a hybrid -- "sometimes" it pushes the elements left (usually when it would be most awkward to not) and sometimes lets them stay "off column" but centered. To keep it from ever looking plain "weird" it is given a max-width of six columns wide.
这篇关于中心流体网格元素，而不在父级上设置硬宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
