Question

我有很多不同尺寸的盒子;尺寸未知。我想使用与text-align:justify相同的CSS规范。例如：

enter image description here

我想在CSS或CSS3中有一个解决方案。如果不可能，JS是可以接受的。

Answer 1

可能的CSS解决方案

如果框设置为display:inline-block，则可以像处理文字一样应用text-align:justify。但请注意，text-align:justify对最后一行文本没有任何影响。因此，如果只有一条线需要合理，那么什么都不会发生。

如果您可以修改HTML，则解决此问题的一种方法是添加100％宽度的尾随元素，以确保您要证明的内容不是最后一行。如果您无法修改源HTML，则可以使用JavaScript追加尾随元素。

这是一个jsfiddle来证明这一点。在IE6 / 7/8/9，Firefox，Chrome，Safari中测试过。（注意：必须在框之间添加 以使其在IE6 / 7中工作。）

Answer 2

这是一个小例子：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        #container {
            width: 500px;
            margin: 0 auto;
            font-size: 0; /* Fixed space caused by line breaks */
        }
        #container .inner {
            display: inline-block;
            background: red;
            width: 25%;
            border: 10px rgba(255,255,255,1) solid;
            padding: 5px;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>
<body>

<div id="container">
    <div class="inner">Lorem</div>
    <div class="inner">Ipsum</div>
    <div class="inner">Dolor</div>
    <div class="inner">Sit</div>
</div>

</body>
</html>

这被认为有点作弊。我使用白色边框作为元素之间的边距。只有在父级上有纯色背景时才能正常工作。

注意事项：

box-sizing: border-box关于所有元素，确保width: 25%包含填充和内部边框。
使用白色边框模拟边距效果。
在父级上使用font-size: 0，在子级上使用font-size: 16px，可以消除由内联块元素之间的换行符引起的空白。

＆lt; * text-align：justify *＆gt;功能对于div（盒子）

2 个答案:

注意事项：