Question

我有一个想法，我想把div放在里面。我是css的新手，无法弄清楚如何做到这一点。我知道那里有漂浮法，但不能理解它。我已经在这几天了，我真的被卡住了:( 这是小提琴（我知道它不起作用，但我没有办法连接外部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。清除那里的任何浮动物品都是明确的，这样做的结果就是如果它不允许在那一边有东西它会把东西推到下面：

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

Answer 2

首先，ids需要是唯一的，所以我会改变＆＃34;分享按钮＆＃34;而是一个班级。接下来，我看到你有三个div用于社交媒体图标，每个图标都带有＆＃34; share-buttons＆＃34;，但它们也包含在一个包含相同＆＃34; share-buttons＆＃34;的包装中。我会删除那个包装器，因为你已经有了一个包装器div。最后，给新创建的课程＆＃34;分享按钮＆＃34; a＆＃34; float：left;＆＃34;你的图像应该像你一样寻找自己。另外，请确保清除浮标＆＃34;清除：两者;＆＃34;在这个div之后。

使用float定位div

2 个答案: