将<div>与显示内联或内联块对齐，不带宽度

Question

在我的项目中，我有一行＆＃34;用户名＆＃34;，＆＃34;公司电话＆＃34;和＆＃34; Logo＆＃34;。我被要求将公司电话放在＆＃34; Logo＆＃34;之间。和＆＃34;用户名＆＃34;。我有一个问题，因为用户名可以是5到30个字符长，所以我不能给它固定的宽度。公司电话是图像（非文字）。

请帮忙！我无法找到适用于我的例子的任何东西。感谢。

Answer 1

您可以使用flexbox：

＆＃13;

＆＃13;

.container {
  display: flex;
}
.phone {
  flex-grow: 1; /* Grow to fill avilable space */
  text-align: center; /* Center contents */
}

＆＃13;

<div class="container">
  <div class="logo">Logo</div>
  <div class="phone">1-999-999-999</div>
  <div class="name">User name</div>
  <div class="exit">Exit</div>
</div>
<div class="container">
  <div class="logo">Logo</div>
  <div class="phone">1-999-999-999</div>
  <div class="name">Very long user name for this demo</div>
  <div class="exit">Exit</div>
</div>

＆＃13;

＆＃13;

＆＃13;