CSS定位。（包括例如）

我的CSS代码可以在这里找到： http://cssdesk.com/KGUfn CSS定位。（包括例如）

我试图让在底部箱（ICON1，ICON2和ICON3）旁边的海誓山盟和中心他们，但它不工作。

我在做什么错？

来源

2012-11-05 Aristona

给予好评用于提供代码看着。 Downvote for Comic Sans :) –

不是宇宙的无味。 :)“font-family：'Cinzel装饰'，草书;”该网站不接受我相信的字体。 – Aristona

您可能需要实际使用字体嵌入。 :)你可能会检查你是否可以从谷歌字体中获得Cinzel装饰。 –

您目前的定位#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; }

因为它们分别133px宽度的3个要素，您的宽度总共为399px（基本上为200px）。正因为如此，如果您从父元素（每个项目上都有）开始，然后使用余量来抵消每个元素 - 您将获得您之后的布局。

#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-05 21:40:48

完美回复，但为什么我们不使用绝对位置上的icon3？ – Aristona

啊 - 因为我原本奇怪地回答了这个问题。 :)我会更新反映。 '＃icon-3'绝对应该也是绝对定位的。 –

Icon3需要right:上的单位，并且您有一个错字“ackground-color：yellow;”

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

来源

2012-11-05 21:40:47

CSS定位。 （包括例如）

回答

相关问题

CSS定位。（包括例如）