在容器 Div 中垂直等距分布的可变 Div 数量答案

【问题标题】：Variable Number of Divs Equally Spaced Vertically in a Container Div在容器 Div 中垂直等距分布的可变 Div 数量
【发布时间】：2014-04-22 19:07:10
【问题描述】：

我想做this，但要垂直而不是水平。我已经尝试了here 的解决方案，但我希望子 div 在容器 div 的整个高度上保持相等的空间 - 该解决方案仅将 div 居中而不扩大它们之间的空间以使用容器的整个高度。我愿意使用 Javascript，但更喜欢仅使用 HTML/CSS 的解决方案。我已经简要地查看了 flexbox，但我被向后兼容性问题吓到了。

一些基本代码：

<div id="parent">
    <div id="1" class="child"></div>
    <div id="2" class="child"></div>
    <div id="3" class="child"></div>
</div>

应该在父级的最顶部使用 div1，在父级的最底部使用 div 2，在中间居中使用 div3，理想情况下，我可以添加可变数量的额外子 div，并且间距会自动调整.

有什么建议吗？我应该只使用 flexbox 而不必担心支持旧版浏览器吗？

【问题讨论】：

我认为您目前只能使用 flexbox 执行此操作。否则，您将获得最接近的 CSS 表 jsfiddle.net/brxpv/1 - 但这并不是您真正想要的效果

标签： javascript html css flexbox

【解决方案1】：

我使用过 javascript。我的 javascript 代码是

function cssFunction(){
            var elem = document.getElementsByClassName("child")
            var len = elem.length;
            for(var i=0;i<len;i++){
                elem[i].style.height =200/len;
            }
        }

css 是

div#parent{
  max-height: 200px;
  width : 500px;
  padding : 0px;
  margin : 0px;
 }

.child{
    border:2px solid #a1a1a1;
    width : 93%;
    margin : 5% 0%;
    height : 100%;
 }

而 Html 是

<body onload="cssFunction()">
    <div id="parent">
        <div id="d1" class="child">Vertical alignment</div>
        <div id="d2" class="child">Vertical alignment</div>
        <div id="d3" class="child">Vertical alignment</div>
        <div id="d4" class="child">Vertical alignment</div>
        <div id="d5" class="child">Vertical alignment</div>
        <div id="d6" class="child">Vertical alignment</div>
        <div id="d7" class="child">Vertical alignment</div>
        <div id="d8" class="child">Vertical alignment</div>
</div>

【讨论】：

【解决方案2】：

我认为您可能会这样做：

HTML

<div id='parent'>
    <div id='1' class='child'></div>
    <div id='2' class='child'></div>
    <div id='3' class='child'></div>
</div>

CSS

.child {
    height: 30%;
    margin: 0;
}

#parent {
    height: 90%;
}

使用百分比是一种简单的填充方式，例如您的 div #parent，但您也可以使用任何您喜欢的单位。

希望这对您有所帮助。

【讨论】：

没有。如果您阅读该问题，您将看到解决方案需要响应可变数量的子 div，而这种方法不这样做。
那么，对不起，我帮不上忙，可能有办法做到这一点......也许你只是指定宽度？那只会设置宽度，高度会自动调整。