html - 使用 float 定位div

Question

我有一个 figcaption，我想在其中放置 div。我是 css 的新手，不知道该怎么做。我知道有一个 float 方法，但无法理解它。我已经在这里呆了好几天了，真的被困住了:(这是 fiddle (我知道它不起作用，但我没有办法链接外部 css):http://jsfiddle.net/dottsie/6uhw8c1p/

    <link rel="stylesheet" type="text/css" href="css/component.css" />
                <header>
                    <h1>Caption Hover Effects</h1>
                </header>

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

                    <li>
                           <figure>
                                <img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">


          <figcaption>   

              <h3></h3>

                 <div>    <div id="share-buttons>                                                                                                                 <div id="facebook share-buttons"></div>
                                                                                  <div id="twitter share-buttons"></div>
                                                                          <div id="pinterest share-buttons"></div>
                                                                         <div id="google_plus share-buttons"></div>
                                                       </div>
             </figcaption>
                        </figure>

                    </li>

Answer 1

首先要注意的是您已经为按钮使用了 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}

如果您要在一个页面上拥有多个元素，那么它就是一类元素。记住 ID 是唯一的。

接下来，您可以使用 float 让您的对象尝试将自己定位到尽可能远的一侧:

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

这里 A B C 和 D 都向左浮动 float:left，并尽可能地向上推。

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

这里 W X Y 和 Z 都向右浮动 float:right，并尽可能地向上推。

如果你想让它们垂直堆叠，我们可以使用 clear。 Clear 停止那里有任何 float 的元素在规定的一侧，其结果是如果不允许在该侧有任何东西，它将把东西推到下面:

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

所以在这种情况下，在 B 上使用 clear:left 会强制它到下面的新行，清除 C 会强制 D 向下等等。我们不希望包装发生任何意外情况，因此值得清除双方只是为了完整性，所以使用 clear:both 将确保没有两个 float 按钮在同一行上。

当你的代码被压缩后，它看起来像这样。

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