0

display: ブロックを持つ div があります。その中に、ディスプレイ付きの別の div: inline-block があります。含まれている div のサイズを測定すると、子の境界は考慮されません。ブラウザーのインスペクターで簡単に確認できます。含まれている div をストレッチして、その境界にインライン ブロックの境界が含まれるようにする方法はありますか?

問題を示すコードは次のとおりです。

<div style="display: inline">
  <div style="display: inline">aaa</div>
  <div style="display: inline-block; width: 100px; height: 100px; background: red"></div>
</div>

PSコンテナのインラインをインラインブロックに変更できません。変更できるのは、インライン ブロック div の属性だけです。

4

3 に答える 3

1

設定heightしwidthてauto

  <div style="display: inline-block; background-color:green;width:auto; height:auto;">
  <div>aaa</div>                                            ^^^^^^^^^^^^^^^^^^^^^^^^
    <div style="width: 100px; height: 100px; background: red;opacity:0.5;"></div>
</div>
于 2013-06-01T08:29:59.383 に答える
1

コンテンツを div 内にラップして、値を与えることができますdisplay: block;

デモ http://jsfiddle.net/kevinPHPkevin/649EB/

CSS

.container {
    background: #ccc;
}
.inner {
    display: block;
    background: #000;
}

HTML

<div class="container" style="display: inline">
    <div class="inner">
        <div style="display: inline">aaa</div>
        <div style="display: inline-block; width: 100px; height: 100px; background: red"></div>
    </div>
</div>

編集済み

使用できる場合はdisplay: block;、次のように設定しますheight: auto;

[更新] デモhttp://jsfiddle.net/kevinPHPkevin/649EB/1/

于 2013-06-01T08:44:21.500 に答える