例如,
<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 等...
如有任何帮助,我们将不胜感激!
最佳答案
正如@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>
关于html - 在 LESS 中根据其父级的 sibling 数量设置元素宽度,无需任何脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33499166/