0

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

我试图让底部的框（icon1、icon2 和 icon3）彼此相邻并将它们居中，但它不起作用。

我究竟做错了什么？

4

2 回答 2

2

Icon3 需要打开单位，right:而您有一个错字“背景颜色：黄色；”

#icon-3
    {
        position:absolute;
        bottom:0;
        right:300px;
        width:133px;
        height:152px;
        background-color: yellow;
    }
于 2012-11-05T21:40:47.947 回答
2

您当前定位#icon-1为position: absolute; left: 0; bottom: 0;#icon-2position: 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; }

因为133px每个元素都有 3 个宽度元素，所以总共有 3 个399px宽度（基本上是200px）。因此，如果您从50%父元素中的位置开始（left: 50%在每个项目上），然后使用边距偏移每个位置 - 您将获得您所追求的布局。

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

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

另外 - 你的原件#icon-3没有出现，因为你的 css 说ackground-color: yellow而不是background-color: yellow

于 2012-11-05T21:40:48.757 回答