Fatal编程技术网
  • javascript/
  • Javascript 容器Div中垂直等距分布的可变Div数

Javascript 容器Div中垂直等距分布的可变Div数

javascript html css

Javascript 容器Div中垂直等距分布的可变Div数,javascript,html,css,flexbox,Javascript,Html,Css,Flexbox,我希望这样做，但做垂直，而不是水平。我已经尝试过该解决方案，但我希望子div在容器div的整个高度上具有相等的空间-该解决方案仅将div居中，而不扩展它们之间的空间以使用容器的整个高度。我愿意使用Javascript，但更喜欢只使用HTML/CSS的解决方案。我简要地研究了flexbox，但向后兼容性问题吓坏了我 一些基本代码： <div id="parent"> <div id="1" class="child"></div> <div

我希望这样做，但做垂直，而不是水平。我已经尝试过该解决方案，但我希望子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，而不用担心支持较旧的浏览器？

我认为您可能可以这样做：

HTML

使用百分比是一种简单的填充方式，比如你的div父对象，不过你也可以使用任何你喜欢的单位。希望这能有所帮助

我使用过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;
            }
        }
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>
不。如果你读了这个问题，你会发现解决方案需要响应数量可变的子div，而这种方法不行。那么，很抱歉，我帮不上忙，可能有一种方法可以做到。。。也许你可以指定宽度？这将只是设置宽度，高度将自动调整。我想你目前只能用flexbox来做这件事。否则，您将得到最接近css表的效果——但这并不是您真正想要的效果 
function cssFunction(){
            var elem = document.getElementsByClassName("child")
            var len = elem.length;
            for(var i=0;i<len;i++){
                elem[i].style.height =200/len;
            }
        }

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

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

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