0

我有div一个可变宽度的，并且我在这个 div 中有可变数量的孩子。我想让孩子们填满里面的空间div。我首先尝试将divtodisplay:table和 children更改为，display:table-cell但最终我所有的孩子都填满了所有空间并且不服从他们的width和max-width属性。然后我尝试了 table 方法：我已经将 the 更改div为 a table（是的，我知道，不推荐，这就是我可能在这里问的原因）并将孩子们包装成 atr和 each in tds，但我最终所有子单元格都填满了整个空间，但左对齐（我设置了 children divs display:inline-block）：

在此处输入图像描述

如果我将对齐更改为center，我会得到：

在此处输入图像描述

它们居中，但我仍然在父级的左侧和右侧得到空格（我为区分设置了黄色背景）。我真正想要的是：

在此处输入图像描述

我通过将第一个td文本设置为左对齐、第二个居中、第三个右对齐来实现这一点。但是我可能有更多这些缩略图，所以我需要一个通用的解决方案。

如何在容器内布置可变数量的子元素以填充宽度，第一个元素从容器的确切左边界开始（与第二个图像不同），最后一个元素在容器的右边界结束（如第三张图片所示）？

4

1 回答 1

1

像这样的东西？

HTML：

<div>
    <span id="s1"></span>
    <span id="s2"></span>
    <span id="s3"></span>
</div>

CSS：

div{
    background: #ff6;
    text-align: justify; /* Important */
    font-size: 0; /* Used to remove spaces */
}
div:after{ /* Used to create a new last line */
    content: '.';
    display: inline-block;
    width: 100%;
    height: 0;
    overflow: hidden;
}

span{
    display: inline-block;
    height: 150px;
}

/* Use your widths, min-widths and max-widths here: */
#s1{
    background: red;
    width: 15%;
    min-width: 50px;
    max-width: 150px;
}
#s2{
    background: green;
    width: 40%;
    min-width: 50px;
    max-width: 250px;
}
#s3{
    background: blue;
    width: 40%;
    min-width: 50px;
    max-width: 200px;
}

演示

您可以使用包装器获得等间距text-align: justify的盒子。问题是它不适用于最后一行（在这种情况下也是第一行），因此您可以使用text-align-last, 或:after伪元素 withwidth: 100%来创建新的最后一行。

于 2013-10-12T01:20:16.787 回答