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

我的笔

我想在包装分区内垂直对齐3个分区。3个分区中的每个分区的高度应为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" >◄</div>
</div>
</div>

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

---

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

如果更改为使用无序列表，则更容易。ID

previewTemplate

也应该是一个类，因为ID必须是唯一的

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>

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

现在，当您的

#wrapperDiv

的高度随类

更改li时，previewTemplate

将更改其高度

这是一张工作票。此外，还应避免使用内联CSS。将所有样式都放在CSS文件中。从长远来看，这样做更容易管理

编辑为

#navigationWheeler

CSS添加

左填充：0

---

编辑更新JSFIDLE以考虑

我使用flex-box，可以更好地处理列表项，并且您可以将ul、ol、il放在flex-box中。

---

对于上述场景，您是否有JSFIDLE链接？使用id=“previewTemplate”作为3 DIV标记有什么意义？Chrome28不会显示您的li标记。你的小提琴有点毛病。@Elisa它对我有用，我用的是Chrome28。我刚刚检查过，你必须水平滚动才能看到li中的数字。我只是简单地使用了你提供的，我没有做太多的修改。很抱歉，我没有看到水平滚动条，并且认为布局被破坏了，因为我没有看到数字。。。你知道除了数字之外，左边的垂直空间是从哪里来的吗？我看不出这个的宽度设置。这里有数字，但数字div不考虑父的高度。我可以将父级高度更改为300px，然后我希望每个div的高度都是100px，但事实并非如此。哦，是的，我现在明白你的意思了。

自动添加了左边的填充。您必须在CSS中指定不需要填充。我已经对JSFIDLE和上面的示例代码进行了更改。我只是简单地添加了

padding left:0

至

#navigationWheeler

。这是针对1e8/9的呼叫FlexibleBox尝试此项