0

私のペン

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" >◄&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

0

div の代わりにリスト項目を使用してみてください。簡単にスタイルを設定でき、その構文は div よりも配置に重点を置いています。また、ラッパー div もパーセンテージである必要があります。100px のラッパー div で高さを 10% にすることはできません。

于 2013-08-01T15:01:07.333 に答える