私はdiv/icon(#user-initials)を他の2つのdiv:.employee-nameと.statusの左側に浮かべています。浮動小数点の下に折り畳まれたときにdivの垂直方向の間隔を維持する
.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>
すべてのヘルプは非常に私はすべてを試してみた...いただければ幸いです。
編集:追加より良いスクリーンショットの画像
https://jsfiddle.net/wk79s3qf/1/は**サイモンKnittelによって行わ最適なソリューションです**いますが、必要サポートされているブラウザを確認します。 –
[マージンコラプスを無効にする方法](0120-18753)をご覧ください。 –
ここでは、認識以外のエラーはありません –