0

絶対に配置され、2 つの子 div を含む div が必要です。1 つはテキストが上に、もう 1 つは背景色が下に表示されます。そのようです：

<div class="test1">
    <div class="caption">Text that determines width of parent.</div>
    <div class="bg"></div>
</div>

.test1 に背景色を設定できることはわかっていますが、jQuery を使用して位置、不透明度、幅などを下位互換 (IE 7+) で制御するには、この背景を別の div にする必要があります。

次の CSS を使用すると、テキストが .bg div の背後にあることを除いて、すべてを機能させることができます。上にテキストが必要です。

<style type="text/css">
.test1 {
    position: absolute;
    left: 100px;
    top: 100px;
}
.test1 .caption {
    float: left;
    white-space: nowrap;
}
.test1 .bg {
    height: 50px;
    background-color: #222;
}
</style>

.test1 の幅をテキストの幅に基づいて設定し、.bg div を 100% 幅にして .caption の下に配置するにはどうすればよいですか? これは IE 7 以降で動作する必要があることを繰り返します。

ここにフィドルがあります：http://jsfiddle.net/kbp6r/

4

2 に答える 2

1

html を以下のように変更します。

<div class="test1">
   <div class="bg">
      <div class="caption">Text that determines width of parent.</div>
   </div>
</div>
于 2013-03-30T10:12:50.620 に答える
1

配置の問題については、 ;) の魔法に頼る必要がありますz-index。これは、静的でない位置 (デフォルトはposition: static) を持つ要素に適用できます。したがって、要素を絶対的に配置することと、.bg要素を相対的に配置することを検討しました.captionか?

.test1 .caption {
    position: relative;
    white-space: nowrap;
    z-index: 2; /* More than .bg so it will be above */
}
.test1 .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* Less than .caption so it will be stacked underneath */
}

要素を強制的に.bgと同じ次元に.captionするために、ダーティ ポジショニング トリックを使用できます - 絶対位置に配置された要素に次のプロパティが宣言されている場合:

top: 0;
left: 0;
bottom: 0;
right: 0;

親コンテナのサイズまで塗りつぶされます - この場合、親コンテナのサイズは のコンテンツによって決まり.captionます。これは、(私の推奨に従って) 相対位置を使用しているためです。

これがどのように機能するかを示すフィドルです：http://jsfiddle.net/teddyrised/kbp6r/2/

于 2013-03-30T10:03:17.693 に答える