4

这是我在 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 >= sum（子框的宽度）

但根据萤火虫的说法，这些盒子甚至没有边距margin: 0 auto;

我会修修补补一段时间，但没有任何成功。任何帮助将不胜感激。

编辑

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

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

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

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

最终结果将是这样
在此处输入图像描述 的：相同颜色的箭头（间距）应该具有相同的宽度。（在图片第二行的情况下，间距只是0。窗口（和所有其他行）的宽度符合它的宽度）

首选通用方法。

在小提琴中解决问题

4

4 回答 4

2

您可以通过应用以下 css 来做到这一点：

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

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

}

演示

编辑

根据您的编辑：

你应该用一个 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 的宽度。

评论回复

为了使工作文本对齐：证明宽度必须给出 100%display: inline-block;

于 2013-08-14T08:18:09.750 回答
1

我认为您可以通过将 margin-left(?) 设置为 50px 并将行的最后一个子项 margin-right:50px 并将行类更改为 text-align:left 来实现您的目标

也许使用 float 而不是 display-block 更好

于 2013-08-14T08:08:37.857 回答
1

如果你擅长计算（不像我）。您可以使用定位。像这样的东西：

我2.5%在元素之间保持一个空间。您也可以使用固定空间来代替。另外，给一些min-width限制元素的更多收缩。

工作小提琴

更新：

由于调整窗口大小时子元素之间的间隙会发生变化，因此您需要动态进行计算。

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');
}

更新小提琴

于 2013-08-14T08:46:37.217 回答
1

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'));
}
于 2014-08-08T15:14:47.703 回答