Question

我的笔

我想在包装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;
}

Answer 1

我使用flex-box，工作方式更好的列表项加上你可以在flex-box中放置ul，ol，il。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Answer 2

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

Answer 3

如果您更改为使用无序列表，则会更容易。 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>的左侧填充

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

3 个答案: