0

我的钢笔

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

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

我只是希望所有 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" >◄&lt;/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;
}
4

3 回答 3

1

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

于 2013-08-01T17:44:20.207 回答
0

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

于 2013-08-01T15:01:07.333 回答
0

如果更改为使用无序列表会容易得多。IDpreviewTemplate也应该是一个类，因为 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" >◄&lt;/div>
</div>
</div>

然后在您的 CSS 中，您可以.previewTemplate在 CSS 中设置高度为 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改变时，带有类的 li.previewTemplate会改变它的高度。

这是一个有效的JSFiddle。此外，您应该避免使用内联 CSS。将所有样式保存在 CSS 文件中。从长远来看，使其更易于管理。

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

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

于 2013-08-01T15:38:41.170 回答