Question

“名字姓氏”保持与小首字母图标顶部对齐，直到它变得太长，然后它在它下面下降。即使长度增加，我也希望它能保持在顶部的位置。不确定如何在不使用浮动的情况下执行此操作。

.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/

Answer 1

试试这个， 也为第二个元素赋予宽度。

<style>
.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;
  width: 170px
}

#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;
}
</style>
<body>
<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 Lastnameghgujyikui</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>
</body>

希望它会有用。

内联块元素彼此相邻 - 防止较长的文本跳到其旁边的元素下方

1 个答案: