证明CSS中的内联div

Question

这是我在html中的内容：

<div class="row" id="row1">
    <div class="box" id="box1"> </div>
    <div class="box" id="box2"> </div>
    <div class="box" id="box3"> </div>
</div>

这就是我想用它做的事情：

红色箭头的长度，无论宽度 row1（或偶数3个方框）

尝试

这是我的css：

/* 1 row per line */
.row { 
       display: block;
    text-align: center;
}

/* and the box is inline */
.box {
       display: inline-block;
    text-align: justified;
        height: 50px;
        margin: 0 auto;
}

结果：

绿色箭头长度相同

我已将其宽度暂时定义为

#box1 { width: 50px; }
#box2 { width: 90px; }
#box3 { width: 50px; }

如果我让w =行宽，
间距应适用于任何w＆gt; =总和（子框的宽度）

但根据萤火虫的说法，这些方框甚至没有来自margin: 0 auto;

的边距

我会在没有任何成功的情况下修补这一段时间。任何帮助将不胜感激。

---

修改

最终，我将有一个<div class="window"></div>包含任意数量的行，其中每行还包含任意数量的框。

我定义了每个框的宽度和高度，然后相应地调整行和窗口尺寸（这是块级元素默认行为的方式）;

• 行的高度等于其所有子框的最大高度。
• 窗口的高度是所有行高的总和
• 窗口的宽度是行的宽度，其所有子框的宽度总和最高

前两个是自动的，但对于第三个，我可以在完成所有行之后设置它。 现在该行的其余部分将填充其宽度（.row {width: 100%; }）。但是，有些行可能包含总宽度小于窗口宽度的框。

最终结果如下：
其中相同颜色的箭头（间距）应具有相同的宽度。 （在图片中第二行的情况下，间距只是0.窗口（和所有其他行）的宽度符合其宽度）

首选方法。

---

Go to problem in fiddle

Answer 1

您可以通过应用以下css来执行此操作：

#wI-row1 { 
    width: 600px;
    /* width: 100%; */
    text-align: justify;
    margin: 0 auto;

}
#wI-row1:after{
    content: " ";
    width: 100%;
    display: inline-block;

}

demo

修改

根据你的编辑：

你应该用div假设包装所有的div，

<div class="wrapper">
<div class="row" id="wI-row1">
    <div class="box" id="wI-Level">   </div>
    <div class="box" id="wI-Faction"> </div>
    <div class="box" id="wI-Gender">  </div>
</div>
<div class="row" id="wI-row2">
    <div class="box" id="wI-Level">   </div>
    <div class="box" id="wI-Faction"> </div>
    <div class="box" id="wI-Gender">  </div>
</div>
</div>

  

所以，现在不要在＃wI-row1，＃wI-row2中设置宽度，因为你已经在.box中定义了宽度，这没关系。只需设置.wrapper的宽度。

评论回复

要使工作文本对齐：对齐宽度必须使用display: inline-block;

给出100％

Answer 2

我认为你可以通过将margin-left（？）设置为50px，将row的最后一个子边距设置为50px，并将行类更改为text-align：left

来实现目标

使用float而不是display-block

可能更好

Answer 3

如果你善于计算（与我不同）。你可以使用定位。像这样：

我在元素中保留2.5%的空格。您也可以使用固定空间。 另外，给一些min-width限制更多的元素收缩。

<强> Working Fiddle

更新

由于调整窗口大小时子元素之间的差距正在改变，您需要动态进行计算。

的javascript：

function setAlign(parentClass, childCommonClass) {
    var childDivs = document.getElementsByClassName(childCommonClass);
    var childDivsTotalWidth = 0;
    var childDivsLength = childDivs.length;
    var parentElement = document.getElementsByClassName(parentClass)[0];
    var parentElementWidth = parentElement.offsetWidth;
    for (var i = 0; i < childDivsLength; i++) {
        childDivsTotalWidth += childDivs[i].offsetWidth;
    }
    var remainingWidth = parentElementWidth - childDivsTotalWidth;

    var gap = remainingWidth / (childDivsLength + 1);
    var leftWidth = gap;
    for (var j = 0; j < childDivsLength; j++) {
        if (j > 0) {
            leftWidth += gap + childDivs[j - 1].offsetWidth;
        }
        childDivs[j].style.left = leftWidth + "px";
    }
}

window.onload = setAlign('row', 'box');
window.onresize = function () {
    setAlign('row', 'box');
}

Updated Fiddle

Answer 4

Mr_Green的答案非常好，特别是因为它解释了调整窗口的大小。

我们可以使用marginLeft而不是left来避免绝对定位。我的方法使用百分比：

function justify(container) {
  var ch= container.children;
  var norm= container.offsetWidth/100;
  for(var chWidth=0, i=0 ; i < ch.length ; i++) {
    chWidth+= ch[i].offsetWidth/norm;
  }
  var Dpercent= (100-chWidth)/(ch.length+1);
  for(var i = 0 ; i < ch.length ; i++) {
    ch[i].style.marginLeft= Dpercent+'%';
  }
} //justify

window.onresize= window.onload= function() {
  justify(document.getElementById('row1'));
}