floatを使用したdivの配置

最初に気付くのは、ボタンにIDを使用していることです。ID属性は通常一意であり、CSSが。で呼び出すため、代わりにクラスを意味しているように見えます。の代わりに ＃

<div id="facebook">

// This is accessed in css by #facebook{float:left} 

<div class="facebook"> 

// This is accessed in css by .facebook{float:left}

1つのページに複数のアイテムがある場合、それはアイテムのクラスです。IDは一意であることを忘れないでください。

その後、floatを使用して、オブジェクトをできるだけ片側に配置しようとすることができます。

_________________________________________________
| A  | B  | C  | D  |                           |
|____|____|____|____|                           |
|_______________________________________________|

ここでは、ABCとDはすべて左float:leftに浮いていて、できるだけしっかりと押し上げています。

_________________________________________________
|                           | Z  | Y  | X  | W  |
|                           |____|____|____|____|
|_______________________________________________|

ここでは、WXYとZがすべて右float:rightに浮いていて、できるだけしっかりと押し上げています。

それらを垂直に積み重ねたい場合は、クリアを使用できます。明確な停止は、記載されている側に浮かぶアイテムがないことです。その結果、その側に何かを置くことが許可されていない場合、物事を下に押し下げます。

_________________________________________________
| A  |                                          |
|____|    |                                     |
| B  |  <-'                                     |
|____|    |                                     |
| c  |  <-'                                     |
|____|    |                                     |
| D  |  <-'                                     |
|____|                                          |
|                                               |
|_______________________________________________|

したがって、この場合、clear:lefton Bを使用すると、下の新しい行に強制され、Cをクリアすると、Dが押し下げられます。ラッピングで予期しないことが発生することは望ましくないため、完全clear:bothを期すために両側をクリアする価値があるため、使用すると2つがフロートしないようになります。ボタンは同じ行にあります。

コードが凝縮されると、次のようになります。

<header>
    <h1>Caption Hover Effects</h1>
</header>

<ul class="grid cs-style-2">

    <li>
        <figure>
            <img src="http://domain/imagefile.jpc"/>
            <figcaption>                                      
              <div>
                  <div class="facebook share-buttons"></div>
                  <div class="twitter share-buttons"></div>
                  <div class="pinterest share-buttons"></div>
                  <div class="google_plus share-buttons"></div>
              </div>
            </figcaption>
        </figure>                                
    </li>
</ul>

すべての共有ボタンにこのCSSを使用

.share-buttons{ 
    float:left;
    clear:both;
    height:32px;
    padding:2px;
    width:32px;
}

そして個々のボタン自体

.share-buttons.facebook {
    background: url('images/facebook.png') no-repeat;
}
.share-buttons.twitter {
    background: url('images/twitter.png') no-repeat;
}
.share-buttons.pinterest {
    background: url('images/pinterest.png') no-repeat;
}
.share-buttons.google_plus {
    background: url('images/google_plus.png') no-repeat;
}