父母高度为100％时，如何均匀分布不同高度的行？

下面我有3行（.child）不同高度。父母高度为100％时，如何均匀分布不同高度的行？

无法预先知道父级的高度（#parent），如果其父级的高度（#parent的父级）发生更改，它实际上会发生更改。

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

类似于当我们有不同宽度的单元格时，我们想要在水平方向均匀分布。这很容易通过使用display: table-cell;我相信，即使他们的父母的宽度是未知的。

的jsfiddle：http://jsfiddle.net/7ty82k3b/5/

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>

来源

2014-10-10 Sprout Coder

包装你.child一些.row里面，所以你可以显示.row为table-row和.child为table-cell然后vertical-align: middle他们。此外，请记住，图像是不能很好地处理“异国情调”显示的crybabies，所以不要试图将它们显示为table-row或table-cell。

#parent { 
 
    display: table; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100%; 
 
    width: 93px; 
 
    background-color: red; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.child { 
 
    position: relative; 
 
    border: 1px solid blue; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
span.child { 
 
    text-align: center; 
 
}

<div id="parent"> 
 
    <div class="row"> 
 
    <div class="child"> 
 
     <img 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> 
 
    </div> 
 

 
    <div class="row"> <span class="child">Hey!</span> 
 

 
    </div> 
 
    <div class="row"> 
 
    <div class="child"> 
 
     <img 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> 
 
    </div> 
 
</div>

来源

2014-10-10 01:06:50

完美，谢谢！ :) – 2014-10-10 01:08:37

父母高度为100％时，如何均匀分布不同高度的行？

回答

相关问题