Question

该方案的大纲是，我有一个div类some-class，它将有1个或2个子div个。只要它有1，我希望该子div（div.some-class > div）拥有width: 100%;，但只要它有2，我希望它们（div.some-class > div:nth-of-type(1), div.some-class > div:nth-of-type(2)）的宽度分别为60%和40%。我无法修改HTML，因为它是由内容管理系统生成的。

是否有CSS黑客可以给我这种行为？

Answer 1

当然，请使用display: table和adjacent sibling selector。

＆＃13;

body > div {
    display: table;
    width: 600px;
}

div > div {
    background: blue;
    height: 100px;
    display: table-cell;
}

div > div + div {
    background: red;
    width: 40%;
}

＆＃13;

<div>
    <div></div>
</div>

<hr>

<div>
    <div></div>
    <div></div>
</div>

＆＃13;

是否可以只使用CSS，没有JavaScript？

1 个答案: