7

我有一个容器 DIV 设置为“位置：固定”，其中包括另一个设置为绝对位置的 div。

有什么办法可以使这个包含的 div 的宽度和高度适合内容，而不总是 100%？

这就是我所拥有的：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内部元素的值设置为该值减去其自身宽度的一半。然后，对高度执行相同的操作。

此外，您可能错过的一件事是您的内部 div 应该设置为position: relativeand 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 回答