CSS定位图片彼此相邻

时间:2011-01-03 19:05:41

标签: css facebook position css-float

我一直在努力尝试将图片彼此相邻放置在一个Facebook欢迎页面中,可以找到here

这是CSS:

table {
    border-collapse: collapse;
}

th, td { 
    margin: 0;
    padding: 0;
}

div.nav {
    width: 520px;
    margin: 0 auto;
    text-align: center;
}

div.nav1
{
/*height: 165px;*/
width: 136px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/internships-link.jpg");
float: left;
}

div.nav1 a, div.nav1 a:link, div.nav1 a:visited {
display:block;
}

div.nav1 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav1 a:hover img {
visibility:hidden;
}

div.nav2
{
/*height: 165px;*/
width: 193px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/website-link.jpg");
float: left;
}

div.nav2 a, div.nav2 a:link, div.nav2 a:visited {
display:block;
}

div.nav2 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav2 a:hover img {
visibility:hidden;
}

div.nav3
{
/*height: 165px;*/
width: 102px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/education-link.jpg");
float: left;
}

div.nav3 a, div.nav3 a:link, div.nav3 a:visited {
display:block;
}

div.nav3 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav3 a:hover img {
visibility:hidden;
}

div.nav4
{
/*height: 165px;*/
width: 89px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/programs-link.jpg");
float: left;
}

div.nav4 a, div.nav4 a:link, div.nav4 a:visited {
display:block;
}

div.nav4 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav4 a:hover img {
visibility:hidden;
}#container {
    margin: 0 auto;
}

1 个答案:

答案 0 :(得分:1)

您的CSS根本没有应用于该页面。 Facebook扰乱了所有的文件名,因此很难分辨出发生了什么,但是FBML在某种程度上是不正确的,并且没有加载CSS。

建议:制作一个单独的非FB版本并发布以解决您的CSS问题,然后发布。