CSS плавать копию правой

Question

я создал следующее:

И я хотел бы верхнюю часть «независимых», чтобы быть более вправо, как в разделе «интерактивный». Я попытался плавать: правильно; но это неверно.

Мой код:

.badgesblock{style: 'padding-left: 30px;'} 
    .independent 
    = image_tag 'independent.png', style: 'float:left;' 
    .independentcopy{style: ''} 
     %p{style: 'font-weight: bold;'} Independent 
     %p{style: 'width: 450px;'} We’re the only independent user review site for wedding suppliers. Businesses can’t vet reviews on their listing – that’s why your customers trust us. 
    %br 
    %br 
    .verified 
    = image_tag 'verified.png', style: 'float:right;' 
    %p{style: 'font-weight: bold;'} Verified 
    %p{style: 'width: 450px;'} All reviews and reviewers are verified. Each user fills in their personal details and verifies their profile with a wedding date and a picture. The result is an authentic, trustworthy review system. 
    %br 
    %br 
    .interactive 
    = image_tag 'interactive.png', style: 'float:left;' 
    .interactivecopy{style: 'float:right;'} 
     %p{style: 'font-weight: bold;'} Interactive 
     %p{style: 'width: 450px;'} Passive display advertising has limited impact. We provide a unique opportunity to actively engage with potential customers and showcase the great service at the heart of your business. 

Что я упускаю в CSS?

Answer 1

Это довольно ясна случай для части многоразовой CSS под названием the media object.

Его основной строительный блок с изображением, видео или любым другим и связанным с ним текстом слева или справа.

/** Generic media object **/ 
 
.media { 
 
    overflow: hidden; 
 
} 
 

 
.media-item { 
 
    float: left; 
 
    margin-right: 25px; 
 
} 
 

 
.media.flipped > .media-item { 
 
    margin-right: 0; 
 
    margin-left: 25px; 
 
    float: right; 
 
} 
 

 
/** specific styles **/ 
 
.badge { 
 
    /* ... */ 
 
}

<div class="badgesblock"> 
 
    <div class="media badge independent"> 
 
    <a href="#" class="media-item"> 
 
     <img src="http://placehold.it/250x150"/> 
 
    </a> 
 
    <div class="media-body"> 
 
     <p><strong>Independent</strong></p> 
 
     <p>We’re the only independent user review site for wedding suppliers. Businesses can’t vet reviews on their listing – that’s why your customers trust us.</p> 
 
    </div> 
 
    </div> 
 
    <div class="media badge flipped verified"> 
 
    <a href="#" class="media-item"> 
 
     <img src="http://placehold.it/250x150" /> 
 
    </a> 
 
    <div class="media-body"> 
 
     <p><strong>Verified</strong></p> 
 
     <p>All reviews and reviewers are verified. Each user fills in their personal details and verifies their profile with a wedding date and a picture. The result is an authentic, trustworthy review system.</p> 
 
    </div> 
 
    </div> 
 
    <div class="media badge interactive"> 
 
    <a href="#" class="media-item"> 
 
     <img src="http://placehold.it/250x150" /> 
 
    </a> 
 
    <div class="media-body"> 
 
     <p><strong>Interactive</strong></p> 
 
     <p>Passive display advertising has limited impact. We provide a unique opportunity to actively engage with potential customers and showcase the great service at the heart of your business.</p> 
 
    </div> 
 
    </div> 
 
<div>

Answer 2

h2, p { 
 
    margin: 0; 
 
} 
 

 
.section { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.section:nth-child(odd) img { 
 
    float: left; 
 
    margin-right: 15px; 
 
} 
 
.section:nth-child(even) img { 
 
    float: right; 
 
    margin-left: 15px; 
 
}

<div class="badgesblock"> 
 
    <div class="section independent"> 
 
    <img src="http://placehold.it/100x100" /> 
 
    <div class="independentCopy"> 
 
     <h2>Independent</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p> 
 
    </div> 
 
    </div> 
 
    <div class="section verified"> 
 
    <img src="http://placehold.it/100x100" /> 
 
    <div class="verifiedCopy"> 
 
     <h2>Verified</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p> 
 
    </div> 
 
    </div> 
 
    <div class="section interactive"> 
 
    <img src="http://placehold.it/100x100" /> 
 
    <div class="interactiveCopy"> 
 
     <h2>Interactive</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p> 
 
    </div> 
 
    </div> 
 
</div>

Вы не должны делать это, как я сделал. Я использую несколько новых (для вас) селекторов css, таких как nth-child, что облегчает мне работу. Но если вы хотите нацелиться по классу или чему-либо еще, не стесняйтесь. Я просто дал вам представление о том, какой css вам нужно для достижения того, чего вы хотите.

Придумайте .section:nth-child(odd) как: .section.independent img, .section.interactive img { }

http://codepen.io/pacMakaveli/pen/jPEegN