0
"Firstname Lastname"は長すぎる長さになるまで小さなイニシャルアイコンに一番上にとどまり、その下にドロップします。長さが増えてもトップに立つようにしたいと思っています。浮動小数点を使用せずにこれを行う方法がわかりません。隣り合うインラインブロック要素 - 長いテキストが要素の下にジャンプするのを防ぐ
.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;
}
.name-and-status {
vertical-align: top;
}
#user-initials {
margin-right: 5px;
}
.inline-block {
display: inline-block;
}
.menu-user-info div {
vertical-align: middle;
}
.container {
width: 220px;
background-color: #fff;
}
.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: 12px 2px 0 0;
vertical-align: middle;
}
div.status-message {
display: inline-block;
font-size: 11px;
line-height: 14px;
white-space: nowrap;
margin-top: 10px;
vertical-align: top;
}<div class="container">
<div id="user-initials" class="inline-block">
<div class="user_img_color user_img_color-pending">FL</div>
</div>
<div class="name-and-status inline-block">
<div class="employee-name">Firstname Lastname</div>
<div class="status-indicator status-indicator-complete"></div>
<div class="status-message">Process Status</div>
</div>
<div class="welcome-message">
Lorem ipsum dolor sit amet
<br>adipiscing elit, sed do eiusmod.
</div>
</div>フィドル：https://jsfiddle.net/63kn6ufr/1/
あなたのdiv.containerに幅がある特定の理由はありますか？問題を解決するために幅を削除してください。私が何かを見逃していない限り...？ – semuzaboi
どれくらい長くても、1行に姓と名字が必要ですか？ –
'max-width：150px'や' .name-and-status'クラスで、あなたが必要としている問題を解決するかもしれません – Manjunath