Html 当父级高度为100%时，如何均匀分布不同高度的行？_Html_Css_Css Tables_Tablerow

Html 当父级高度为100%时，如何均匀分布不同高度的行？

html css

Html 当父级高度为100%时，如何均匀分布不同高度的行？,html,css,css-tables,tablerow,Html,Css,Css Tables,Tablerow,下面我有3行（.child）高度不同父项（#父项）的高度无法预先知道，如果父项（父项）的高度发生变化，它实际上会发生变化我是否可以使用一些CSS组合来设置这些行之间的边距，使这些行在垂直方向上均匀分布类似于当我们有不同宽度的单元时，我们希望在水平面上均匀分布。使用display:table cell可以轻松实现这一点

下面我有3行（

.child

）高度不同

父项（

#父项

）的高度无法预先知道，如果父项（父项）的高度发生变化，它实际上会发生变化

我是否可以使用一些CSS组合来设置这些行之间的边距，使这些行在垂直方向上均匀分布

类似于当我们有不同宽度的单元时，我们希望在水平面上均匀分布。使用

display:table cell可以轻松实现这一点
JSFIDDLE：
CSS:
#parent {
   display: table;
   position: fixed;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 93px;
  background-color : red;
}

.child {
   position : relative;
   float: left;
   clear: both;
   border: 1px solid blue;
   display: table-row;
   width: 91px;
}

span.child {text-align:center;}

HTML:
<body>
    <div id="parent">
     <img class="child" src="http://www.philreinhardt.com/downloads/SuperSqueezePages/Super%20Squeeze%20Page%20Pack/BonusMoreAnimatedArrows/More%20Animated%20Arrows/Arrow%20Right%201/Arrow%20Right%201%20Small/ArrowRightBlueSmall.gif">
     <span class="child">Hey!</span>
     <img class="child" src="http://www.philreinhardt.com/downloads/SuperSqueezePages/Super%20Squeeze%20Page%20Pack/BonusMoreAnimatedArrows/More%20Animated%20Arrows/Arrow%20Right%201/Arrow%20Right%201%20Small/ArrowRightBlueSmall.gif">
  </div>
</body>


嘿
将您的.child
包装在一些.row
中，这样您就可以将.row
显示为表格行
，将.child
显示为表格单元格
，然后将它们垂直对齐：中间对齐。另外，请记住，图像是不能很好地处理“异域”显示的对象，因此不要尝试将它们显示为表格行
或表格单元格


#父级{
显示：表格；
位置：固定；
顶部：0px；
左：0px；
身高：100%；
宽度：93px；
背景色：红色；
}
.行{
显示：表格行；
}
.孩子{
位置：相对位置；
边框：1px纯蓝色；
显示：表格单元格；
垂直对齐：中间对齐；
}
孩子{
文本对齐：居中；
}

嘿