1

次の HTML および CSS コードとJSFiddle の例があります。

vertical-alignブラウザー ウィンドウのサイズが変更されたときに、CSS プロパティを使用して、より多くのテキストを含む div を他の div と揃えることができるかどうかを知りたいです。現在、ブラウザ ウィンドウのサイズが変更されると、 が または に設定されているかどうかに応じて、より多くのテキストを含む div が下または上に拡張されvertical-alignます。topbottom

つまり、より多くのテキストを含む div の高さが増加し、他の部分は増加しません。height プロパティを設定せずに黄色の div の高さを等しく保つにはどうすればよいですか?

<div class="red-box">
  <div class="yellow-box">
    <img src="">
     <h1>heading one</h1>

    <p>Little text one</p>
  </div>
  <div class="yellow-box">
    <img src="">
     <h1>heading two</h1>

    <p>Little text two</p>
  </div>
  <div class="yellow-box">
    <img src="">

     <h1>heading three</h1>

    <p>Lots of text that
        just keeps on going and going</p>
  </div>
</div>

およびCSS:

.red-box {
  background:red;
}

.yellow-box {
  background: yellow;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
  display: inline-block;
  width: 33%;
  text-align: center;
  vertical-align: bottom;
  /* vertical-align: top; */
}
4

3 に答える 3

1

.yellow-box の表示プロパティを...に変更してみてください

display: table-cell;
于 2013-05-28T15:41:52.803 に答える
0

vertical-alignプロパティはtable-cellおよびinline level要素と連携します。、および をinline level意味します。inlineinline-blockinline-table

s にあるようdisplay: inline-blockにdiv(デフォルトはblock)、 を使用できますvertical align。

しかし、あなたが何を達成したいのかわかりません。

+ w3 | vertical-align

于 2013-05-28T16:09:49.133 に答える