7

絶対位置に設定された別の div を含む "position:fixed" に設定されたコンテナー DIV があります。

常に 100% ではなく、コンテンツに合わせて幅と高さを含む div を作成する方法はありますか?

これは私が持っているものです: http://jsfiddle.net/ydSqU/

<div class="transparent_background">
    <div id="window">hello.</div>
</div>

これは私が望むものです: http://jsfiddle.net/3BYPu/ (幅/高さを手動で設定する必要はありません)。

<div class="transparent_background">
    <div id="window" style="width:30px; height:30px">hello.</div>    
</div>
4

3 に答える 3

3

aur0n、

可能であれば、これを行うための最良かつ最も簡単な方法は、javascriptを使用して要素の高さと幅を計算し、それに応じて内側の要素を配置することです。

これを実現するには、含まれている要素の幅を2で割ってからleft、内側の要素の値をその量から自身の幅の半分を引いた値に設定します。次に、高さについても同じようにします。

また、見逃した可能性のあることの1つは、内部divをとに設定する必要があることposition: relativeですdisplay: inline。divが含まれている要素の幅に一致するように伸びている理由position: absoluteは、要素を通常の流れから外し、通常の流れのままposition: relativeにするためです。

これが私が使用したコードです（jQueryを使用）：

// centering the width
$("#window").css("left", ($(".transparent_background").width()/2)-($("#window").width()/2) + "px");
// centering the height
$("#window").css("top", ($(".transparent_background").height()/2)-($("#window").height()/2) + "px");

このソリューションでは、幅と高さを手動で設定する必要はありません。また、複数行のテキストを含む内部divがあることは問題になりません。

フィドル： http： //jsfiddle.net/ydSqU/3/

于 2013-02-25T16:57:29.893 に答える
2

以下をお試しいただけますでしょうか。 

 #window {
  border:2px dotted red;
  background:white;
  width:50%;
  height:auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25%;
  vertical-align:center;

}
于 2013-02-25T16:23:48.313 に答える
0

@aur0n css を次のように変更します 

#window {
        border:2px dotted red;
        background:white;
        position: absolute;
        clear:both;
    }
于 2013-02-25T16:19:29.847 に答える