html - 当 div 在 float 元素下方折叠时保持 div 的垂直间距

Question

我有一个 div/图标 (#user-initials) float 到另外两个 div 的左边:.employee-name 和 .status。

如果 .employee-name 行恰好由两行组成，.status div 将被推到左侧，#user-initials 下面。这很好用。

我想要做的是将原始间距保持在 .status 顶部，它来自 .employee-name (11px)。然而，一旦它位于 float 项下方，它的边距就会减少到大约 6px。请参阅下面的屏幕截图以获得更好的想法:

fiddle :https://jsfiddle.net/kfjtnk9r/1/

.container {
  width: 220px;
  background-color: #fff;
}
.user_img_color,
.user_img_color_large {
  background: #8aa943;
  border-radius: 40px;
  color: #fff;
  float: left;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  z-index: 1;
  margin-right: 10px;
}
.employee-name {
  word-wrap: break-word;
}
.status {
  margin-top: 4px;
}
.welcome-message {
  margin-top: 10px;
  font-size: 11px;
  line-height: 15px;
}
div.status-indicator {
  display: inline-block;
  height: 8px;
  width: 8px;
  content: " ";
  line-height: 14px;
  background: #f5c002;
  border-radius: 8px;
  margin: 0 2px 0 0;
  vertical-align: middle;
}
div.status-message {
  display: inline-block;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  vertical-align: middle;
}

<div class="container">

  <div class="clearfix">
    <div id="user-initials" class="inline-block">
      <div class="user_img_color user_img_color-pending">TH</div>
    </div>
  </div>


  <div class="employee-name">Name Namington</div>

  <div class="status">
    <div class="status-indicator status-indicator-complete"></div>
    <div class="status-message">Status Message</div>
  </div>


  <div class="welcome-message">
    Welcome message Welcome message
    <br>Welcome message Welcome message
  </div>

</div>

任何帮助将不胜感激......我已经尝试了一切。

编辑:添加了更好的截图图片

Answer 1

解决方案
您可以使用 display: flex;(称为 flexbox)将图标、名称和状态消息包装到容器中，如下所示 https://jsfiddle.net/wk79s3qf/1/

flex 盒子
Flexbox 是一项新的 CSS3 功能，它允许您轻松创建类似网格的布局，同时不需要 margin 和 float 以及其他技巧。

备忘单
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

浏览器支持
http://caniuse.com/flexbox