Question

我有一个有时有两件或三件或一件的容器。如果有一个项目，我希望每个容器（只有一个）的宽度为100％。如果有两个项目，我希望每个容器的宽度为50％。如果有三个项目，我希望每个容器的宽度为33％。事先知道项目数，但是在脚本执行之后。我怎样才能在css中完成上述内容？

Answer 1

看哪，flex: 1的力量。

同一容器的五种变体
每个容器的div数量增加（从1到5）。
纯CSS（flexbox），以及一套适用于所有
无需定义任何宽度或百分比

＆＃13;

body {
    display: flex;
    justify-content: center;             /* center containers on page */
    flex-wrap: wrap;
}

.container {
    display: flex;
    width: 75%;
    margin-bottom: 10px;                 /* non-essential decorative styles */
    background-color: yellow;            /* non-essential decorative styles */
    border: 1px solid black;             /* non-essential decorative styles */
}

.box {
    flex: 1;                             /* THE KEY RULE */
    height: 50px;
    margin: 5px;                         /* non-essential decorative styles */
    background-color: lightgreen;        /* non-essential decorative styles */
}

＆＃13;

<div class="container">
    <div class="box"></div>
</div>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

＆＃13;

每个绿色框的宽度基于容器中的可用空间。但是，如果您希望每个框都具有最小尺寸，则可以将flex规则调整为flex: 1 0 75px。这意味着盒子将尽可能地扩展，但绝不会小于75px宽。

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

Answer 2

您可以使用:nth-of-type和:nth-last-of-type伪类对来实现此效果。

li:nth-of-type(1):nth-last-of-type(1) {
width: 100%;
}

li:nth-of-type(1):nth-last-of-type(2),
li:nth-of-type(2):nth-last-of-type(1) {
width: 50%;
}

li:nth-of-type(1):nth-last-of-type(3),
li:nth-of-type(2):nth-last-of-type(2),
li:nth-of-type(3):nth-last-of-type(1) {
width: 33.33%;
}

完成示例：

＆＃13;

ol {
display: block;
height: 40px;
margin:0;
padding:0;
}

li {
display:inline-block;
margin: 2px 0;
padding: 0;
height: 36px;
color: rgb(255,255,255);
background-color: rgb(127,127,127);
font-weight:bold;
}

li:nth-of-type(1) {
background-color: rgb(255,0,0);
}

li:nth-of-type(2) {
background-color: rgb(63,225,63);
}

li:nth-of-type(3) {
background-color: rgb(0,0,255);
}

li:nth-of-type(1):nth-last-of-type(1) {
width: 100%;
}

li:nth-of-type(1):nth-last-of-type(2),
li:nth-of-type(2):nth-last-of-type(1) {
width: 50%;
}

li:nth-of-type(1):nth-last-of-type(3),
li:nth-of-type(2):nth-last-of-type(2),
li:nth-of-type(3):nth-last-of-type(1) {
width: 33.33%;
}

＆＃13;

<ol><li>100% Item</li></ol>

<ol><li>50% Item</li><li>50% Item</li></ol>

<ol><li>33% Item</li><li>33% Item</li><li>33% Item</li></ol>

＆＃13;

如何根据数量

2 个答案: