集裝箱分區中垂直等距間隔的可變數量

我期待做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在父的最頂端，2區在父的極端底部，DIV3中間爲中心的渲染，最好我可以添加一個可變數量的附加子div和間距會自動調整。

有什麼建議嗎？我應該只使用Flexbox，而不用擔心支持舊瀏覽器？

來源

2014-04-06 Michael.Lumley

我認爲你目前只能與Flexbox的做到這一點。否則，你會得到最接近的是與CSS表http://jsfiddle.net/brxpv/1/ - 但這不是真的你想要的效果 – Danield

-1

我想你大概可以做這樣的事情：

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，儘管你也可以使用你喜歡的任何單位。

希望這有助於。

來源

2014-04-06 15:03:40

號。如果你讀了這個問題，你會看到該解決方案需要響應到可變數量的子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; 
      } 
     }

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

來源

2014-04-22 11:07:10 chandu

集裝箱分區中垂直等距間隔的可變數量

回答

相關問題