将多个div垂直对齐，每个div具有相同的百分比高度

Question

我的笔

http://codepen.io/helloworld/pen/dqGDk

我想在包装器div中垂直对齐3个div。这3个div中的每一个都应该有33%的高度。当div的高度为33px时，我可以使布局工作，但我需要它作为百分比，因为包装器div的高度是动态变化的。有时它的高度是100像素，有时是70像素等等…

我只想通过使用百分比高度，所有3个总是正确对齐。

将divs与百分比保持一致的方法是什么？

HTML

<div id="wrapperDiv" style="height:100px;">
<div id="navigationWheelerContainer">
  <div id="navigationWheeler" >
    <div id="previewTemplate" >1</div>
    <div id="previewTemplate" style="background-color: #0094ff;">2</div>
    <div id="previewTemplate" >3</div>
  </div>
   <div id="toggleButtonRight" >◄</div>
</div>
</div>

CSS

#navigationWheeler {
    height: 100%;
    text-align: center;
    width: 100%;
    vertical-align: middle;
    border: black solid 1px;
    background-color: lightgray;   
    display: inline-block;
}
#navigationWheelerContainer {
    float: right;
    height: 100%;
}
#previewTemplate {
    vertical-align: middle;
    line-height: 33%; /* 33px; works but is not dynamic to the wrapper div */
}
#toggleButtonRight {
    width: 40px;
    border: black solid 1px;
    cursor: pointer;
    text-align: center;
}

Answer 1

我使用flex box，可以更好地处理列表项，而且你可以在flex box中放置ul、ol、il。https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Answer 2

如果您更改为使用无序列表，会更容易。此外，ID previewTemplate应该是一个类，因为ID必须是唯一的。

HTML

<div id="wrapperDiv" style="height:100px;">
<div id="navigationWheelerContainer">
  <ul id="navigationWheeler" >
    <li class="previewTemplate" >Testing</li>
    <li class="previewTemplate" style="background-color: #0094ff;">2</li>
    <li class="previewTemplate" >3</li>
  </ul>
   <div id="toggleButtonRight" >◄</div>
</div>
</div>

然后在您的CSS中，您可以将CSS中的.previewTemplate设置为具有33%的高度。同时添加list-style: none;以消除项目符号。然后在#navigationWheeler中设置padding-left: 0;以消除间距。

CSS

#navigationWheeler {
    height: 100%;
    text-align: center;
    width: 100%;
    vertical-align: middle;
    border: black solid 1px;
    background-color: lightgray;   
    display: inline-block;
    padding-left: 0;
}
#navigationWheelerContainer {
    float: right;
    height: 100%;
}
.previewTemplate {
    height: 33%;
    list-style: none;
}
#toggleButtonRight {
    width: 40px;
    border: black solid 1px;
    cursor: pointer;
    text-align: center;
}

现在，当#wrapperDiv的高度改变时，类.previewTemplate的li将改变它的高度。

这是一个正在工作的JSFiddle。此外，您应该避免使用内联CSS。把你所有的样式都放在你的CSS文件里。从长远来看，更易于管理。

EDIT将padding-left: 0添加到#navigationWheeler 的CSS

EDIT更新JSFiddle以考虑为<ul> 留下的填充

Answer 3

尝试使用列表项而不是div。你可以很容易地设置样式，它们的语法更侧重于对齐，而不是div。此外，你的包装器div也需要是一个百分比，你不能在一个100px的包装器中做10%的高度。