Question

我的css代码可以在这里找到： http://cssdesk.com/KGUfn

我正在尝试将底部的框（icon1，icon2和icon3）放在彼此旁边并居中，但它不起作用。

我做错了什么？

Answer 1

图标3需要right:上的单位，并且您有一个拼写错误的“背景颜色：黄色;”

#icon-3
    {
        position:absolute;
        bottom:0;
        right:300px;
        width:133px;
        height:152px;
        background-color: yellow;
    }

Answer 2

您目前将#icon-1定位为position: absolute; left: 0; bottom: 0;，将#icon-2定位为position: absolute; right: 0; bottom: 0;

要获得您所描述的效果，请尝试使用：

#icon-1, #icon-2, #icon-3 {
    position: absolute;
    bottom: 0;
}
#icon-1 { left: 50%; margin-left: -200px; }
#icon-2 { left: 50%; margin-left: -67px; }
#icon-3 { left: 50%; margin-left: 67px; }

由于您有3个133px宽度的元素，因此宽度总共为399px（基本上为200px）。因此，如果您从父元素中的50%位置开始（每个项目上的left: 50%），然后使用保证金抵消每个位置 - 您将获得您所追求的布局。

#icon-1 margin-left: -200px设置占#icon-1整个宽度，加上#icon-2宽度的一半。 #icon-2的偏移量-67px将其左边缘设置为距离中心左侧自身宽度的一半（以中心为中心）。 #icon-3的{{1}}的偏移量只是向右移动了一个等于67px宽度一半的数量 - 使它们不重叠。

例如，以下是对原始代码的更新：http://cssdesk.com/cXrsP

此外 - 您的原始#icon-2未显示，因为您的CSS说#icon-3而不是 ackground-color: yellow b

CSS定位。（包括示例）

2 个答案:

CSS定位。 （包括示例）

2 个答案:

CSS定位。（包括示例）