1

我对 CSS 和属性组合还很陌生，我遇到了一个问题，即出现了我不想要的间隙。在玩弄了这些属性并观看了一些 youtube 视频后，我仍然遇到问题。从欢迎磁贴底部到示例标题的间距应为 10 像素。

我正在尝试制作类似于 Windows Metro 或任何他们所称的瓷砖的瓷砖。我已经创建了锚点 ID，并且 ID 的 CSS 创建了图块。

此图显示了问题：

在此处输入图像描述

.header {   
    background:url(../images/header2.png) no-repeat;
    width:384px;    
    height:69px; 
}

#content {  
    position:relative;  
    width:384px;    
    height:646px;   
    margin-top:30px;    
    overflow:hidden;    
    border:none;
    background-color:#CCC; 
}

.welcomeTile {  
    background:url(../images/welcomeTile.jpg) no-repeat;    
    float:left;
    width:180px;    
    height:280px;   
    margin-left:7px; 
}

.aboutTile{     
    background:url(../images/aboutTile.jpg) no-repeat;
    float:left;     
    width:180px;    
    height:105px;   
    margin-left:10px; 
}

.galleryTile{       
    background:url(../images/galleryTile.jpg) no-repeat;
    float:left;     
    width:180px;    
    height:105px;   
    margin-left:10px;
    margin-top:10px; 
}

.examplesTile{      
    background:url(../images/examplesTile.jpg) no-repeat;
    float:left;     
    width:180px;    
    height:105px;   
    margin-left:7px;
    clear:left; 
}

.contactTile{       
    background:url(../images/contactTile.jpg) no-repeat;
    float:left;     
    width:180px;    
    height:105px;   
    margin-top:10px;
    margin-left:7px;    
    clear:left; 
}
4

2 回答 2

0

问题似乎是糟糕的数学计算..

和.aboutTile两者之间.galleryTile都有105px高度和10px边距。
那是一共220px但.welcomeTile有280px高度。

这留下了 60 多个像素到底部。

如果您希望距离 10 像素，.examplesTile则应将 设置.welcomeTile为 have 230px。
或者更好的是有220px高度和10px底部边距。

演示在 http://jsfiddle.net/mCB25/

于 2012-11-10T13:53:45.403 回答
0

使用 CSS 样式表时，如果您有两个以上的图块堆叠在三个堆栈中的最低两个或两个太多，三个的右侧将跟随第一个，，您将不得不使用负数进行调整你的身高上的数字，所有其他瓷砖将跟随第一个..如果你移动第一个在顶部，所有将跟随它，，现在相反，如果你移动一个中间的顶部也会移动，如果你移动底部或最左边的一个，中间的也会移动，，，所以你用你的高度上的负数来补偿。如果这有帮助，，大声笑很难解释。

于 2012-11-10T13:53:56.147 回答