Question

我正在尝试找到一种纯CSS方式，让一个或多个元素内联，让它们调整宽度以填充容器，例如。

1个元素

[------]

2个元素

[--- ***]

3个元素

[ - ** ..]

这可以通过纯CSS实现吗？

Answer 1

在父级上使用display：table，在子级上显示：table-cell。然后你可以根据需要添加尽可能多的内部div。像这样：

HTML

<div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
</div>

CSS：

.container {
 display: table;
    width: 500px;
    height: 300px;
    outline: 1px solid red;
}

.inner {
    display: table-cell;
    outline: 1px solid blue;
}

这里的小提琴：http://jsfiddle.net/w8p2nj9z/

具有多个元素的动态宽度

1 个答案: