Question

我创建了以下内容：

My display

我希望顶部“独立”能够像“互动”部分一样向右移动。我试图漂浮：对;但这不正确。

我的代码是：

.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

＆＃13;

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

＆＃13;

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

＆＃13;

你不必像我那样做。我使用了一些新的（给你）css选择器，比如nth-child，这对我来说更容易。但如果你想按课程或其他目标，请随意。我刚刚给你一个关于你需要什么样的css来实现你想要的东西的想法。

想到.section:nth-child(odd)喜欢： .section.independent img, .section.interactive img { }

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

Answer 2

对于一个名为the media object的可重用CSS，这是一个非常明确的案例。

它是一个基本的构建块，左侧或右侧有图像，视频或任何相关文本。

＆＃13;

/** 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 {
   /* ... */
}

＆＃13;

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

＆＃13;

CSS将副本浮动到右侧

2 个答案: