css - 用CSS放置元素？

Question

我想放置图像向左浮动，紧挨着图像，向左浮动一个在另一个下面将是 Authro、Date 和 Category，然后，在此之后其他元素将 float 在右侧... 像这样... https://i.imgur.com/tcKwalP.png

这就是我目前所拥有的... https://jsfiddle.net/fbn9r3y4/

这是 html...

<div class="entry-meta">

<span class="entry-image">
<a class="entry-image-a" href="">
<img src="image.jpg" height="48" width="48">
</a>
</span>

<span class="entry-author">
<a href="" title="" rel="author">Ester</a> 
</span>
<span class="entry-date">September 3, 2019</span>

<span class="entry-category-single">
<a href="">Music</a>
</span>

<span class="meta-right">

<span class="entry-views"><span class="view-count">998</span>  Views</span>

<span class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em>Likes</em></span>
</a>

<span class="sl-loader"></span>
</span>
</span>     
</span>

</div>

这是 CSS...

.entry-meta {
    font-family: Arial, sans-serif;
    display: block;
    align-items: center;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    padding: 10px 2px;
}

.entry-image {
    display: block;
    float: left;
}

.entry-author {
    display: block;
    float: left;
    width: 200px;
}

.entry-date {
    display: block;
    float: left;
    width: 200px;
    clear: left;
}

.entry-category-single {
    display: block;
    float: left;
    width: 200px;
    clear: left;
}

.meta-right {
    margin: 0 10px 0 0;
    margin-left: auto;
    order: 2;
    float: right;
}


.entry-like {
    min-width: 32px;
    line-height: 1;
    float: right;
    clear: right;
}

.entry-views {
    min-width: 32px;
    line-height: 1;
    float: right;
    clear: right;
}

Answer 1

我稍微更改了您的标记，并在左侧的内容周围添加了一个包装 meta-left。我还简化了你的 CSS。有几个 CSS 属性无效或不必要。

.entry-meta {
  font-family: Arial, sans-serif;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  padding: 10px 2px;
}

.entry-meta::after {
  content: '';
  clear: both;
  display: block;
}

.meta-left {
  float: left;
}

.meta-right {
  float: right;
  margin: 0 10px 0 0;
}

.entry-image {
  float: left;
}

.meta-info {
  float: left;
  margin-left: 10px;
}

.entry-like {
  min-width: 32px;
  line-height: 1;
}

.entry-views {
  min-width: 32px;
  line-height: 1;
}

<div class="entry-meta">
  <div class="meta-left">

    <div class="entry-image">
      <a class="entry-image-a" href="">
        <img src="https://via.placeholder.com/48" height="48" width="48">
      </a>
    </div>

    <div class="meta-info">
      <div class="entry-author">
        <a href="#" title="" rel="author">Ester</a>
      </div>
      <div class="entry-date">September 3, 2019</div>

      <div class="entry-category-single">
        <a href="#">Music</a>
      </div>
    </div>

  </div>

  <div class="meta-right">

    <div class="entry-views"><span class="view-count">998</span> Views</div>

    <div class="entry-like">
      <span class="sl-wrapper">
        <a href="" class="sl-button">
          <span class="sl-count">500<em> Likes</em></span>
      </a>

      <span class="sl-loader"></span>
      </span>
    </div>
  </div>

</div>

这是一个使用 display:flex 的版本，它更简单。相同的标记。

.entry-meta {
  font-family: Arial, sans-serif;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  padding: 10px 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.meta-left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.meta-info {
  margin-left: 10px;
}

<div class="entry-meta">
  <div class="meta-left">

    <div class="entry-image">
      <a class="entry-image-a" href="">
        <img src="https://via.placeholder.com/48" height="48" width="48">
      </a>
    </div>

    <div class="meta-info">
      <div class="entry-author">
        <a href="#" title="" rel="author">Ester</a>
      </div>
      <div class="entry-date">September 3, 2019</div>

      <div class="entry-category-single">
        <a href="#">Music</a>
      </div>
    </div>

  </div>

  <div class="meta-right">

    <div class="entry-views"><span class="view-count">998</span> Views</div>

    <div class="entry-like">
      <span class="sl-wrapper">
        <a href="" class="sl-button">
          <span class="sl-count">500<em> Likes</em></span>
      </a>

      <span class="sl-loader"></span>
      </span>
    </div>
  </div>

</div>