根据孩子的人数调整孩子的大小(Adjust child size based on number of children)

根据孩子的人数调整孩子的大小(Adjust child size based on number of children)

我想制作一个类似于浏览器中的标签的UI。

为此，我有这个CSS的元素：

width: 20%; max-width: 150px;

好而简单，反应迅速，真棒。

虽然只支持五个标签。 如果我想支持10个选项卡，就像更改为width: 10%一样简单width: 10% 。

所以基本上，我想要这样的东西：

width: calc(100% / number-of-children)

如果这样的事情是可能的，那会很棒。

我目前只是使用JavaScript将宽度设置为上述表达式。 简单，实用，但我想我会问有没有人知道一个纯CSS的解决方案。

I want to make a UI that is similar to tabs in a browser.

To this end, I have elements with this CSS:

width: 20%; max-width: 150px;

Nice and simple, responsive and awesome.

Only supports five tabs, though. If I want to support 10 tabs, it's as easy as changing to width: 10%.

So basically, I want something like:

width: calc(100% / number-of-children)

If such a thing were possible, that'd be amazing.

I'm currently just using JavaScript to set the width to the above expression. Simple, functional, but I figured I'd ask if anyone knows of a CSS-only solution.

最满意答案

用CSS3你可以使用display: flex 。 例如

标记

<section> <div>tab 1</div> <div>tab 2</div> <div>tab 3</div> <div>tab 4</div> </section>

CSS

section { display: flex; } div { flex-grow: 1; max-width: 150px; }

Codepen示例： http ://codepen.io/anon/pen/EGbpH/

with CSS3 you may use display: flex. E.g.

markup

<section> <div>tab 1</div> <div>tab 2</div> <div>tab 3</div> <div>tab 4</div> </section>

Css

section { display: flex; } div { flex-grow: 1; max-width: 150px; }

Codepen example: http://codepen.io/anon/pen/EGbpH/