使用浮动定位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>

- Dottsie

---

我可以做到，稍等五分钟。谢谢 :) - Dottsie

您可以将component.css放入JSFiddle的CSS面板中，或将其粘贴到https://gist.github.com/中，并确保在问题中提及并解释它。 - Stickers

请自己好好排版，同时删除未使用的标签。在空的h3下面有一个div标签没有被关闭。 - Glenn Holland

我会做的。抱歉，我有额外的标签，因为我忘记从代码中删除它们。我有一个更大的项目，但这是我遇到困难的部分。我会尝试将所有内容粘贴到gist.github.com上。 - Dottsie

在你的HTML中，当你想要使用"class"时，你使用了"id"：id="twitter share-buttons"。我认为这是问题的一部分，因为CSS是基于类来设置这些div的样式。 - Michael Dziedzic

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可以阻止任何浮动项在指定方向上出现，这将导致它们被推到下面，除非允许在该侧有其他内容：

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

在这种情况下，在B上使用clear:left会强制将其移到下面的新行，清除C会使D向下移动。我们不希望出现任何意外换行，因此为了完整起见，清除两侧是值得的，因此使用clear:both将确保没有两个浮动按钮在同一行上。

当您的代码被压缩后，它将如下所示。

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

- Glenn Holland

---

现在我明白了，非常感谢你！我会把这个作为答案的。再次感谢 :) - Dottsie

Answer 2

首先，id需要是唯一的，所以我会将“share-buttons”更改为类。接下来，我看到您有三个社交媒体图标的div，每个都有“share-buttons”，但它们也被包装在具有相同“share-buttons”的包装器中。我会删除那个包装器，因为您已经在所有内容周围有一个包装器div。最后，给新创建的类“share-buttons”一个“float: left;”，您的图像应该像您想要的那样对齐。此外，在此div之后，请确保清除您的浮动“clear:both;”。

- John

---

显然，我还没有足够的声望在这里上传图片。这是Github链接：https://github.com/dottsie/div-positioning 我可以解释一下我的想法。所以这是一张有两个标题的图片。一个从顶部滑下来，另一个从底部向上滑动。我已经让滑动工作了。在顶部标题中，我有一个5星评级div，我希望它在左边，投票数据在星星下面，分享按钮需要在星星右边。 - Dottsie

我按照你说的进行了更改。我认为...但是我不确定你所说的clear:both;是什么意思，以及应该放在哪里。这是我在fiddle中所做的更改http://jsfiddle.net/dottsie/6uhw8c1p/1/。 - Dottsie

Dottsie，看起来Glen Hollard的回答比我更好。看起来你应该没问题了 :) - John