1

html代码

<body>
       <div id="container">

               <div id="left">
                            <h2>rerererere</h2>
               </div>
               <div id="right">
                            <h2>sdadsad</h2>
               </div>
       </div>
</body>

CSS 文件

div#container {
position: relative;
    border: 1px solid #000;
}

#left {
    position: absolute;
    width: 480px;
    height: 480px;
    border: 1px solid #0092ef; 
            /*        blue*/
}

#right {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: 250px;
    border: 1px solid #783201;
            /*        brown*/
}

当我只使用正确的 div 作为绝对比没有问题。但是当我在左右 div 中都使用绝对值时。右 div 变得像线一样小。我是 CSS 新手。所以这可能是一个菜鸟问题。为什么如果我将两个绝对 div 放在一个相对 div 下不起作用？请帮帮我。

4

3 回答 3

4

您的权利<div>崩溃了，因为您没有在 CSS 中声明它的固定高度，仅此而已。

于 2012-06-06T16:12:06.967 回答
3

您的右侧 div 没有高度。

这是一个带有高度的右侧 div 的 jsfiddle

于 2012-06-06T16:14:33.100 回答
1

您的右侧 div 没有指定高度，这就是它折叠到行高的原因。

加上删除bottom: 10px;右侧的 div 因为这是多余的，因为已经指定了一个最高值。

于 2012-06-06T16:30:58.243 回答