html - 标签没有按预期 float

Question

我已将我的代码剥离为仅包含 HTML 和 CSS。实际上，我可以通过几种不同的方式解决这个问题，但我和我的同事都对导致 p 标记不向上移动到其容器元素顶部的原因感到困惑。它怎么知道要与其他容器中的其他 p 标记保持一致？

通常稍加调试就可以解开谜团，但这次不行......

我唯一确定的是 inline-block 是部分原因:

.mixItems .mix{
  display: inline-block;
 }

<div class="mix gridView" > 
    <img src="http://placehold.it/350x200">
    <p class="newsHead">News Headline</p>
    <p class="abstract">Lorem ipsum</p>
</div>

Codepen Demo

Answer 1

默认 inline-block 是 vertical-align:baseline，所以你必须给 .mixItems .mix 这个:垂直对齐:顶部

.mixItems {
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}
.mixItems:after {
  content: '';
  display: inline-block;
  width: 100%;
}
.mixItems .mix,
.mixItems .gap {
  display: inline-block;
  width: 99%;
  overflow: hidden;
  vertical-align: top /* new */
}
@media all and (min-width: 568px) {
  .mixItems .mix,
  .mixItems .gap {
    width: 49%;
  }
}
@media all and (min-width: 992px) {
  .mixItems .mix,
  .mixItems .gap {
    width: 23.5%;
  }
}
.mixItems .mix {
  text-align: left;
  background-color: #f7f7f7;
  margin-bottom: 2%;
  /*display: none;*/
}
.mixItems .mix.gridView img {
  width: 100%;
  display: block;
}
.mixItems .mix.listView img {
  display: none;
}
.mixItems .mix .abstract {
  color: #000;
  font-size: 12px;
  padding: 0 1.5em 1.5em 1.5em;
}
.mixItems .mix .newsHead {
  color: #666;
  font-size: 12px;
  padding: 1.5em 1.5em 0 1.5em;
  font-size: 14px;
  font-weight: bold;
}

<div class="container">
  <div id="mixContainer" class="mixItems">
    <div class="mix gridView category-1 category-z" data-myorder="2016" data-date="20160115">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20160115</p>
    </div>
    <div class="mix gridView category-3 category-w" data-myorder="2013" data-date="20130115">
      <!--<img src="http://placehold.it/350x200">-->
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20130115</p>
    </div>
    <div class="mix gridView category-1 category-x" data-myorder="2013" data-date="20130230">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20130230</p>
    </div>
    <div class="mix gridView category-2 category-y" data-myorder="2015" data-date="20150430">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20150430</p>
    </div>
    <div class="mix gridView category-1 category-x" data-myorder="2014" data-date="20140115">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20140115</p>
    </div>
    <div class="mix gridView category-1 category-z" data-myorder="2016" data-date="20160115">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20160115</p>
    </div>
    <div class="mix gridView category-3 category-w" data-myorder="2014" data-date="20140330">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20140330</p>
    </div>
    <div class="mix gridView category-2  category-x  category-y" data-myorder="2012" data-date="20120315">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20120315</p>
    </div>
  </div>
</div>