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

【问题标题】：Align multiple divs vertically each div having same percentage height垂直对齐多个 div，每个 div 具有相同的百分比高度
【发布时间】：2013-08-02 13:59:49
【问题描述】：

我的笔

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

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

我只是希望所有 3 个始终通过使用百分比高度正确对齐。

用百分比对齐 div 的方法是什么？

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

【问题讨论】：

你有上述场景的jsfiddle链接吗？
对 3 DIV 标签使用 id="previewTemplate" 有什么意义？？

标签： html css

【解决方案1】：

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

【讨论】：

robertnyman.com/2010/12/02/…
那是为 1e8/9 调用的flexiblebox
blogs.msdn.com/b/ie/archive/2011/04/14/…
试试这个blogs.msdn.com/b/ie/archive/2011/04/14/…

【解决方案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 文件中。从长远来看，更易于管理。

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

编辑更新 JSFiddle 以考虑 <ul> 的 padding-left

【讨论】：

Chrome28 不会显示您呈现的 li-tags。你的小提琴有问题。
@Elisa 它对我有用，我正在使用 Chrome28。我刚刚检查过，你必须水平滚动才能看到 li 中的数字。我只是简单地使用了你提供的东西，我没有改变太多。
对不起，我还没有看到水平滚动条，并认为布局被破坏了，因为我没有看到数字......你知道除了数字之外左边的垂直空间是从哪里来的吗？我找不到这个的宽度设置。这里有数字，但数字 div 不考虑父级的高度。我可以将父高度更改为 300px，然后我希望每个 div 的高度为 100px，但事实并非如此。
哦，是的，我现在明白你的意思了。 <ul> 自动添加了填充。您必须在 CSS 中指定您不需要填充。我已经对 JSFiddle 和上面的示例代码进行了更改。我只是将padding-left: 0; 添加到#navigationWheeler。

【解决方案3】：

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

【讨论】：