0

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

在此处输入图像描述

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

4

2 回答 2

3

可能的 CSS 解决方案

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

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

这是一个展示这一点的jsfiddle。在 IE6/7/8/9、Firefox、Chrome、Safari 中测试。（注意：必须 在框之间添加一个才能使其在 IE6/7 中工作）。

于 2012-10-06T19:59:40.623 回答
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，消除了由内联块元素之间的换行符引起的空白。
于 2012-10-06T21:51:09.237 回答