CSS中内联div的正当性
下面是我在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 >=和(子框的宽度)。
但根据firebug的说法，这些盒子连margin: 0 auto;的空间都没有
这件事我已经修补了一段时间，但没有成功。任何帮助都将不胜感激。
编辑
最终，我将有一个包含任意行数的<div class="window"></div>，其中每一行还包含任意数量的框。
我定义每个框的宽度和高度，然后行和窗口的尺寸相应地调整(这是块级元素默认的行为方式)；
- 行的高度等于所有子框的最大高度。
- 窗口的高度是所有行高之和。
- 窗口的宽度是行的宽度，其所有子框的宽度之和最高。
前2是自动的，但是对于第3行，我可以在处理完所有行之后设置它。现在，行的其余部分将填充其宽度(.row {width: 100%; })。但是，有些行可能包含框(Es)，其总宽度小于窗口的宽度。
最终的结果会是这样的：
同样颜色的箭头(间距)应该有相同的宽度。(对于图片中的第二行，间距仅为0。窗口(和所有其他行)的宽度与其宽度一致)
最好采用一般的办法。
去找小提琴上的问题
回答 4
Stack Overflow用户
发布于 2013-08-14 08:46:37
如果你善于计算(不像我)。你可以用定位。就像这样：
我在元素中保留了一个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');
}更新Fiddle
Stack Overflow用户
发布于 2013-08-14 08:18:09
您可以通过应用以下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的宽度即可。
评论响应
要使工作文本对齐:用display: inline-block;对齐宽度必须100%
Stack Overflow用户
发布于 2013-08-14 08:08:37
我认为你可以通过设置边框来达到你的目标(？)到50 to，行的最后一个子行边距:50 to，并将行类更改为文本-对齐:左
也许用浮点数代替显示块更好。
https://stackoverflow.com/questions/18226007
复制相似问题
腾讯云开发者
