在没有任何脚本的情况下，根据 LESS 中父级的兄弟姐妹数设置元素宽度

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 个孩子，则“列”宽度为 50%，反之亦然。

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

任何帮助，将不胜感激 ！

Answer 1

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

• 将父设置为 .container{display: flex;}
• 让孩子们 .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>