2

我有一个非常基本的页面，其中包含两个元素，一个外部绿色框和一个内部蓝色框。我很困惑为什么在内框上设置 right 属性会将其移到左侧？此外，我很困惑为什么right:0不将框右边缘与父框的右边缘对齐？这是我的简短示例页面...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #outer {
                background-color : green;
                width : 500px;
                height : 500px;
            }

            #inner {
                position : relative;
                background-color : blue;
                height : 400px;
                width : 400px;
                top : 10px;
                right : 20px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">


            </div>

        </div>
    </body>
</html>
4

4 回答 4

4

设置该right属性指示您的元素应该离右边缘多远。将其视为设置新的起点。默认情况下，您的来源是包含元素的左上角。你可以使用bottomandright来改变它。

当您的元素相对定位时，其右原点将是其右边缘的自然位置。这就是你的元素向左移动 20px 的原因。如果您将位置值更改为absolute，新的原点将是最近定位容器的右边缘，或视口本身。在您的情况下，它是视口。

有关更多信息，请参阅http://www.w3.org/wiki/CSS/Properties/right

于 2012-04-10T03:00:13.197 回答
1

扔一个

float:right;

到您的内部 div，一切都会按您的预期工作。

于 2012-04-10T03:01:30.777 回答
1

此外，我很困惑为什么right:0不将框右边缘与父框的右边缘对齐？

如果您希望父框为所有后代建立新的坐标系，则需要将父框设置为position:relative（或absolute，或）。fixed否则，内盒仍然相对于主体定位。

例如，比较这两个演示：
position:relative外层
position:static外层

于 2012-04-10T03:06:13.997 回答
0

设置正确是你想从右边推多少

于 2012-04-10T03:02:07.467 回答