позиционирование div с использованием поплавка

Question

У меня есть figcaption, что я хочу позиционировать 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

Первое, что нужно заметить, это то, что вы использовали идентификаторы для ваших кнопок. Идентификационные атрибуты, как правило, уникальны, похоже, что вы имели в виду класс вместо этого, хотя благодаря тому, что ваш 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} 

Если вы когда-либо будет иметь более одного элемента на странице, это класс элемента. Помните, что идентификатор уникален.

После этого вы можете использовать поплавок, чтобы ваши объекты, чтобы попытаться позиционировать себя как далеко в одну сторону, как это возможно:

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

Здесь ABC и D все плавал налево float:left и толкать вверх туго, как банка.

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

Здесь W X Y и Z все плавали правильно float:right и подтолкнуть вверх туго, как может.

Если вы хотите, чтобы они были уложены вертикально, мы можем использовать прозрачные. Clear останавливается там от того, какой-либо плавали предметы, которые находятся на стороне, что было сказано, результат того, что в том, что он будет толкать вещи вниз, если его не позволено иметь что-то на той стороне:

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

Так что в этом случай с использованием clear:left на B заставляет его на новую строку ниже, очищая 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

Во-первых, идентификаторы должны быть уникальными, поэтому я вместо этого заменю «общие кнопки» на класс. Затем я вижу, что у вас есть три div для значков социальных сетей, каждый с «share-кнопками», но они также завернуты в обертке с теми же «share-кнопками». Я бы удалил эту оболочку, так как у вас уже есть оболочка div вокруг всего этого. Наконец, дайте вновь созданному классу «общие кнопки» «float: left;» и ваш изображения должны совпадать, как вы ищите. Также убедитесь, что вы очистите свой поплавок «clear: both;» после этого div.