2つの兄弟のインラインブロックの高さを互いにどのように揃えますか？

この例ではhttp://jsfiddle.net/czwsK/ "hello"というテキストを上からボックスの高さの10％に合わせるにはどうすればよいですか？たとえば、最初のインラインブロックは上から20ピクセルです。2つの兄弟のインラインブロックの高さを互いにどのように揃えますか？

出典

2012-02-10 user784637

あなたのデモのURLが無効であると思われます。 –

jsfiddleはサーバーを動かしているので、最後の数日間はちょっとしたことがありました。 –

This JSFiddleはあなたが何をする必要があるかを示して使用しています。 Diodeusが推奨するように、パーセンテージを使用するべきではありませんが、コンテナdiv内に要素をラップし、に希望する高さを divと指定すると、テキスト部にvertical-align: topのパーセンテージを使用できます。

HTML：

<html> 
    <body> 
     <div class="container"> 
      <div class="text">hello</div> 
      <div style="display:inline-block; height:100%; width:200px; border: 1px solid black"></div> 
     </div> 
    </body> 
</html>

CSS：

div.container { 
    height: 200px; 
} 

div.text { display: inline-block; 
    vertical-align: top; 
    margin-top: 10%; 
}

出典

2012-02-10 15:41:50 Bojangles

私はあなたが20pxを上から欲しいと思うなら、10％ではなく20pxを使うべきだと思います。ここでは、%

<html> 
    <body> 
     <div style="display:inline-block;dislpay:table-cell;vertical-align:top;padding-top:10%">hello</div> 
     <div style="display:inline-block; height:200px; width:200px; border: 1px solid black"></div> 
    </body> 

</html>

出典

2012-02-10 15:39:30

2つの兄弟のインラインブロックの高さを互いにどのように揃えますか？

答えて

関連する問題