【css】——根据div个数显示不同的样式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这里记录面试融众集团的一道题

Q：说可能有1~3个item显示在同一行，而item的个数不一定，如果1个，那这个item占宽100%，2个时每一个50%，3个时每一个33%，用纯CSS实现。

A：先贴答案。

  <style>

    section {

      width: 100%;

    }

    .item {

      float: left;

      width: 100%;

      background: #ccc;

      margin: 4px 0;

      text-align: center;

    }

    div:first-child:nth-last-child(2),

    div:first-child:nth-last-child(2) ~ div {

      width: 50%;

    }

    div:first-child:nth-last-child(3),

    div:first-child:nth-last-child(3) ~ div {

      width: 33.33%;

    }

  </style>

  <section>

    <div class="item">item1</div>

    <div class="item">item2</div>

    <div class="item">item3</div>

  </section>