gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:25:12 25 4
gpt4 key购买 nike

例如,

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com