Question

我希望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而不用担心支持旧浏览器吗？

Answer 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>

Answer 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中可变数量的Divs在垂直方向上相等

2 个答案: