根据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个子节点，我想将'column'宽度设置为25％。如果它只有2个孩子，则“列”宽度为50％，反之亦然。

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

任何帮助将不胜感激！

Answer 1

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

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

结果是：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

是的，上述问题有答案。虽然它不是LESS框架特有的，但我们可以通过简单的CSS属性来实现它。

所有CSS属性都可以在LESS中使用。因此它应该适用于LESS框架。

真的很酷！是吗。干杯！

<强>解决方案：

这是工作小提琴。

jsfiddle

这是代码。

HTML：

<div class="container1">
  <div class="column">Column 1</div>
</div>
<div class="container2">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>
<div class="container3">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

CSS：

.container1, .container2, .container3 {
 float: left;
 width: 100%;
}
.container1 .column, .container2 .column, .container3 .column {
  float: left;
}
.container1 .column {
  background: #ff0000;
}
.container2 .column {
  background: #ffff00;
}
.container3 .column {
  background: #ff00ff;
}
.container1 .column:first-child:nth-last-child(1) {
  width: 100%;
}
.container2 .column:first-child:nth-last-child(2), .container2  .column:first-child:nth-last-child(2) ~ .column {
 width: 50%;
}
.container3 .column:first-child:nth-last-child(3), .container3 .column:first-child:nth-last-child(3) ~ .column {
  width: 33.33%;
}

结果：

Answer 3

哈利说：

  

Less编译器无法找出元素有多少兄弟

但这不是一个很少的问题，您可以使用简单的CSS使用常见的display值来解决它。

请看这个 jSFiddle ，它会告诉您.column元素如何自动调整宽度：

核心代码如下：

.container
{
    display:table;
    table-layout:fixed;
    width:100%;
}

.column
{
    display:table-cell;
}

告诉浏览器将元素视为表和内部表格单元格。