0

我想要一个具有固定大小的元素的数据网格（表格布局）。元素应尽可能插入同一行，然后它们应出现在下一行。

我可以用 inline-blocks 做到这一点，但我不知道如何控制外部 div 使它们居中。

这是我的问题：

问题 http://images.devs-on.net/Image/QUPPczp4bO6pkKNR-Bereich.png

你有什么想法如何只使用 CSS 来解决这个问题吗？

4

2 回答 2

1

如果您的块设置为内联块显示，您只需将容器的文本居中：http: //jsfiddle.net/Qv6xY/20/（调整结果面板的大小）

html：

<section>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
</section>​

CSS：

section{margin:50px; padding:25px; background:#333; text-align:center;}
article{width:50px; height:50px; background:#c00; margin: 10px; display:inline-block}

（或者您还想做一些我没有得到的事情。）

于 2012-10-20T18:43:22.643 回答
1

您正在寻找的是一种对空间内的框进行“完全对齐”的方法。目前还没有办法使用纯 CSS 来实现这一点。您将需要在已有的内容（以右侧的空格结尾）或@fabien 提供的内容（使最后一行居中）之间进行选择。

另一种方法是使用一些javascript。

（PS只要你只想要那些框中的字母“a”，可能还有另一种解决方案，但我假设这是更复杂元素的占位符。对吗？）

于 2012-10-20T20:38:15.967 回答