-1

次のような div を配置するために CSS を使用しようとしています。

a) 含まれているものの外側に表示されますdiv(これは可能です)。

b) の下端は、それを含む(私が苦労している)div上端に隣接しています。div

div視覚的には、最終結果は、次の図のように、div がそれを含む の上にあるように見えるはずです。

ここに画像の説明を入力

注:divダイアグラム内の「A」の高さはその内容によって異なるため、「top」プロパティを「-150px」またはその他の負の定数に設定しても機能しません。私もJSを避けようとしていますが、CSSだけでこれを達成できない場合はJSを使用します.

サンプルコード:

<body>
    <div id="div-B" style="
         position: absolute;
         top: 200px;
         left: 200px;
         height: 200px;
         width: 200px;
         background: red;
         ">
        <div id="div-A" style="
         width: 150px;
         background: green;
         ">
            This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text.
        </div> 
    </div>
</body>

ありがとう！

4

2 に答える 2

0

ここにそれを行う1つの方法があります。

次のHTMLの場合:

<div id="div-B">
    <div id="div-A">Lorem ipsum dolor sit amet...</div>
</div>

このCSSを適用します。

#div-B {
    position: absolute;
    top: 200px;
    left: 200px;
    height: 200px;
    width: 200px;
    background: red;
}
#div-A {
    height: auto;
    width: 150px;
    background: green;
    position: absolute;
    bottom: 210px;
    left: 10px;
}

デモを参照してください: http://jsfiddle.net/audetwebdesign/ZM4tT/

ボックス オフセットを 100% または のピクセル高さに設定することにより、絶対配置を使用#div-Aして のフローから出て上部に移動します。 #div-Bbottom#div-B

あなたが持っているコントロールを説明するために、10px のオフセットを作成しました。

テキストが十分にある場合#div-A、その高さがビューポートからはみ出し、一部のコンテンツが表示されなくなる可能性があることに注意してください。

于 2013-10-01T16:22:25.907 に答える
0

div "A" に使用できますposition: absoluteが、ここではより快適な方法 >デモ

于 2013-10-01T15:50:32.083 に答える