Question

下面我有3行（.child），高度不同。

父级（#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>

Answer 1

将.child包裹在某个.row内，这样您就可以将.row显示为table-row，将.child显示为table-cell，然后vertical-align: middle他们。另外，请记住，图像是不能很好地处理的图像，而且非常好。＆＃34;异乎寻常的＆＃34;显示，因此请勿尝试将其显示为table-row或table-cell。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

1 个答案: