html - 在 LESS 中根据其父级的 sibling 数量设置元素宽度，无需任何脚本

Question

例如，

<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
    <div class="column">Column 4</div>
</div>

在上面的 HTML 中，如果容器 div 有 4 个子元素，我想将“列”宽度设置为 25%。如果它只有 2 个 child ，则“列”宽度为 50%，反之亦然。

有没有办法使用 LESS 框架来做到这一点。但不应使用任何脚本，如 javascript、jquery 等...

如有任何帮助，我们将不胜感激!

Answer 1

正如@Danield 在评论中所说，我发布了我的想法作为答案!我的回答基于 2 个 CSS 规则:

• 将父级设置为 .container{display: flex;}
• 将 child 设置为 .column{flex:1;}

结果是:

.container
{
  border:solid 1px red;
  display:flex;
}

.column
{
  border:solid 1px blue;
  flex:1;
}

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
</div>

<br>

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

<br>

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
  <div class="column">Column 5</div>
</div>