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があり230pxます。または、高さと下のマージン
がまだない方がよいでしょう。220px10px

http://jsfiddle.net/mCB25/でのデモ

于 2012-11-10T13:53:45.403 に答える
0

CSSスタイルシートを使用する場合、2つ以上のタイルが3つまたは2つのスタックの一番下の2つにスタックされている場合、3つの右側も最初のタイルに続きます、、、ネガを使用して調整する必要がありますあなたの高さの数、、他のすべてのタイルは最初のタイルに従います..最初のタイルを上に移動すると、すべてがそれに続きます、、、逆に、真ん中のタイルを移動すると、上も移動します、そして、下または左端を移動すると、中央も移動します、、、、高さの負の数で補正します。これが役に立ったら、笑説明するのは難しい。

于 2012-11-10T13:53:56.147 に答える