使用 CSS 或 LESS 根据兄弟计数（不固定）计算 DIV 的宽度答案

【问题标题】：Calculate Width of a DIV based on sibling count (not-fixed) using CSS or LESS使用 CSS 或 LESS 根据兄弟计数（不固定）计算 DIV 的宽度
【发布时间】：2014-11-09 11:28:22
【问题描述】：

我有一个宽度为 100% 的父 DIV；

现在，在运行中，它填充了 n 个子 DIV。

现在，我希望能够仅使用 calc 方法在 CSS 或 LESS 中计算和分配它们的宽度（flex display 在我的实际代码中不起作用，它实际上不仅处理 DIV s，而且实际上使用 d3 处理 svg 元素）所以他们的宽度是这种模式

第 n 个子 DIV 的宽度 = (100% / n) - 10

我怎样才能做到这一点？

另外，DIV 需要是其他颜色，我已经设法弄清楚如何？

任何想法如何使用 css 或更少的方式动态分配宽度？

http://jsfiddle.net/7r029v9n/2/ - 这是 Jsfiddle

这是我目前的代码

.parent {
    width: 100%;
    height: 50%;
    background: pink;
    border: 1px solid red;
    min-width: 400px;
    min-height: 200px;
}

.child {
    min-height: 200px;
    min-width: 10px;
    border: 1px solid black;   
    display: inline-block;
}

.child:nth-child(even) {
    background: blue; 
    width: calc(100%/n -10);
}

.child:nth-child(odd) {
    background: green;  
    width: calc(100%/n -10);
}

【问题讨论】：

你可能想看看CSS flexbox。
那个 flexbox 链接看起来很有希望！我最近遇到了同样的问题，最后求助于桌子......希望我能早点看到！

标签： javascript html css d3.js less

【解决方案1】：

当您想在孩子之间分配可用空间时，Flexbox 是完美的选择：

#parent {
  display: flex;
}
.child {
  flex-grow: 1;
  margin: 5px;
}

var parent = document.getElementById('parent');
var child = document.createElement('div');
child.className = 'child';
var n = Math.round(Math.random() * 10);
for (var i = 0; i < n; ++i) {
  parent.appendChild(child.cloneNode(false));
}

#parent {
  display: flex;
  min-width: 400px;
  min-height: 200px;
  background: pink;
  border: 1px solid red;
}
.child {
  min-height: 200px;
  min-width: 10px;
  border: 1px solid black;   
  display: inline-block;
  flex-grow: 1;
  margin: 5px;
}
.child:nth-child(even) {
  background: blue; 
}
.child:nth-child(odd) {
  background: green;  
}

&lt;div id="parent"&gt;&lt;/div&gt;

您也可以使用 CSS 表格：

#parent {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
}
.child {
  display: table-cell;
}

var parent = document.getElementById('parent');
var child = document.createElement('div');
child.className = 'child';
var n = Math.round(Math.random() * 10);
for (var i = 0; i < n; ++i) {
  parent.appendChild(child.cloneNode(false));
}

#parent {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
  min-width: 400px;
  height: 200px;
  background: pink;
  border: 1px solid red;
}
.child {
  display: table-cell;
  height: 200px;
  width: 10px;
  border: 1px solid black;
}
.child:nth-child(even) {
  background: blue; 
}
.child:nth-child(odd) {
  background: green;  
}

&lt;div id="parent"&gt;&lt;/div&gt;

【讨论】：

这是一个很好的解决方案 Oriol。但是我的实际代码在 flex 不起作用的情况下要复杂一些。在我的实际代码中，我正在使用 d3 库，我需要使线条的笔划宽度足够灵活，以便知道它需要多宽。所以，我需要一个解决方案，我需要明确设置宽度。如果您能提供帮助，那就太好了。非常感谢你的回答:)
@Ishita 您可以尝试使用该弹性代码，然后如果您明确需要宽度，请使用getComputedStyle

【解决方案2】：

AFAIK，了解当前 CSS 中兄弟姐妹数量的唯一方法是结合使用 :nth-child 和 :nth-last-child，例如

div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1) {
   width: 33.3%; /* if there are 3 divs, make them 1/3 of the container width */
}

但是您需要为您决定支持的任意数量的元素编写这样一个选择器，并且每个下一个选择器都将比前一个长。

【讨论】：