Question

我还是相当新的CSS和属性的组合，我遇到了一个我不想要的差距问题。在玩了这些属性并观看了一些youtube视频后，我仍然遇到问题。间距应该是Welcome Tile底部到Example Title的10个像素。

我正在尝试制作类似于Windows Metro的磁贴，或者他们称之为的任何东西。我创建了锚ID，而ID的CSS创建了瓷砖。

此图显示问题：

enter image description here

.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; 
}

Answer 1

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

.aboutTile和.galleryTile都有105px高度和10px之间的边距。
这总共为220px，但.welcomeTile的身高为280px。

剩下60多个像素到底部。

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

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

Answer 2

使用CSS样式表时，当你有两个以上的瓷砖堆叠时，最低的两个堆叠在三个或两个堆叠中，三个的右边也将跟随第一个，你必须调整在你的身高上使用负数，所有其他的瓷砖将跟随第一个...如果你移动第一个在顶部所有将跟随它,,,现在反向如果你移动中间的一个顶部将移动也,,如果你移动底部或最左边的一个，中间的一个也会移动,,,所以你补偿你的高度上的负数。如果这有帮助，哈哈很难解释。

CSS问题与浮动属性的差距

2 个答案: