31

是否可以在宽度可变的 div 中均匀分布许多元素。

这不是工作示例。如果我们使用 text-align:center; 元素将居中，但 margin:0 auto; 不管用。我想完成类似 justify+center 的事情：

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

容器将是用户可调整大小的。一张图值一千字：

在此处输入图像描述

容器（红框）宽度：100%；所以用户可以调整它的大小（浏览器窗口、js 等等）。
<--> 表示偶数空格。第二行 <--> 更大，因为有更多空间。我能够伪造它：

text-align:center;
word-spacing:3em;    // but any fixed value looses proportion
4

3 回答 3

41

我最近读到了一种非常聪明的技术，可以完全按照您的要求进行操作。

简而言之，你只需要使用text-align:justify;容器元素来实现这一点，并在最后加上一个额外的不可见块。

这是有效的，因为inline-block元素被视为文本内容的一部分，每个元素实际上都是一个单词。

使用justify会将文本中的单词展开，以便它们填充元素的整个宽度，并在单词之间留出额外的空间。对于inline-block元素，这意味着它们之间的间距是均匀的。

我在最后提到了一个额外的隐形块。这是必需的，因为正常text-align:justify不会证明最后一行文本。对于普通文本，这正是您想要的，但对于对齐inline-block框，您希望它们全部对齐。

解决方案是在元素列表的末尾添加一个额外的不可见但 100% 宽度的inline-block元素。这将有效地成为文本的最后一行，因此该justify技术将适用于您的其余块。

您可以使用:after伪选择器来创建不可见元素，而无需修改您的标记。

这是您要演示的 jsFiddle 的更新版本：http: //jsfiddle.net/ULQwf/298/

这是更详细解释它的原始文章：http ://www.barrelny.com/blog/text-align-justify-and-rwd/

[编辑] 看到您添加到问题中的图像后的最后一次更新。（我没有更好的答案，但有一些额外的想法可能有用）。

理想情况下，您需要的是一个:last-line选择器。然后你可以text-align:justify正文和text-align:center最后一行。那会做你想要的。

可悲的是，:last-lineis 不是一个有效的选择器（:first-lineis, but not :last-line），所以这个想法就结束了。

一个稍微更有希望的想法是text-align-last，它确实作为一个特性存在。这可以完全满足您的要求：

text-align:justify;
text-align-last:center;

完美的。

除了它是非标准的并且对浏览器的支持非常有限。

您可以在 MDN 上阅读有关此处的信息。

我想作为最后的手段，如果你只能接受部分浏览器支持，它可能是你的一个选择。它至少会为您的某些用户获得您想要的东西。但这并不是一个明智的选择。

不过，我的直觉是，这与您将要获得的一样接近。诱人地接近你想要的，但并不完全在那里。我希望我被证明是错的，但我会感到惊讶。不过太糟糕了，因为我想做的事情似乎完全合乎逻辑。

于 2013-06-06T14:21:09.000 回答
3

我研究了你的例子，你必须组合块/内联样式，因为单独的 justify 只适用于内联（文本）。

div{
    width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:justify;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */

}
div span{ /* I worked with your example you may use a class */
    width:60px;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
    position: relative; /* relative to container div*/
}

div:before{
    content: ''; /* position for block element*/
    display: block; /* the block part for the last item*/
    width: 100%;
}

div:after {
    content: '';
    display: inline-block; /* inline-block for the first (and middle elements) */
    width: 100%;
}
于 2013-06-06T15:27:08.530 回答
-1

如果尝试不同的方法，小提琴看起来与图片非常相似，但两条线的空间都是固定的，但元素是插入的。

div{
    width:250px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:center;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */
}
div span{ /* I worked with your example you may use a class */
    width:60px;
    float:justify;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
      margin-left:2%;
    margin-right:2%;

}
于 2013-06-06T22:21:55.770 回答