浮動小数点の下に折り畳まれたときにdivの垂直方向の間隔を維持する

Question

私はdiv/icon（＃user-initials）を他の2つのdiv：.employee-nameと.statusの左側に浮かべています。

.employee-name行が2行で構成されている場合、.status divは＃user-initialsの下の左側にプッシュされます。これは正常に動作します。

私がしようとしているのは、.employee-name（11px）の元の.statusの上に元の間隔を維持することです。しかし、浮動小数点数を下回ると、そのマージンは約6ピクセルに削減されます。良いアイデアについては、以下のスクリーンショットを参照してください。

フィドル：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

ソリューション
あなたはこのhttps://jsfiddle.net/wk79s3qf/1/

のように（フレキシボックスと呼ばれる）display: flex;で容器にアイコン、名前とステータスメッセージをラップすることができますフレキシボックス
フレックスボックスは、CSS3の新機能で、簡単にgrid-lを作成することができますikeのレイアウトはmarginとfloatのようなものは必要ありません。

チートシート
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ブラウザのサポート
http://caniuse.com/flexbox

Answer 2

あなた.statusルールは、実際にmargin: 4pxを持っています。 10pxのにそれを変更する（またはあなたが好きな）、それが動作します：

https://jsfiddle.net/c036a3mg/1/