Question: For example,

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

```

from the above HTML, I want to set 'column' width 25% if container div has 4 children. If it has only 2 children then 'column' width 50% wise versa.

Is there any way to do this using LESS framework. But should not use any script like javascript, jquery etc...

Any help would be appreciated !

Answer: 
As @Danield say in comment, I post my idea as an answer! 
My answer is base on 2 CSS rules :

* set parent to `.container{display: flex;}`
* set children to `.column{flex:1;}`

The result is :

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

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

```html
<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>
```
As said by Harry:

> 
> Less compiler has no way to find out how many siblings the element has
> 
> 
> 

But this is not a LESS problem, you can solve it with simple CSS using a common `display` value.

Look at this **[jSFiddle](http://jsfiddle.net/ldetomi/k250y184/)** that shows you how `.column` elements automatically adjust their width:

Core code is the following:

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

.column
{
    display:table-cell;
}

```

That tells browser to treat elements as a **table** and inner **table-cells**.