CSS float 复制到右边

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

对于一段名为 the media object 的可重用 CSS，这是一个非常清晰的案例。 .

它是一个基本的构建 block ，在左侧或右侧带有图像、视频或其他内容以及相关文本。

/** 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>