html - 使内部 div 宽度动态

Question

我想给.inner div 剩余的宽度。同时它的 sibling (a & span 标签)可以是动态宽度的。

有什么想法吗？ 下面的代码 & 在 https://jsfiddle.net/pge8rqw0/

.top {} .inner {
  border-bottom: 1px solid black;
  background-color: green;
  width: auto;
  float: left;
  width: 50px;
}
a {
  float: left;
}
span {
  float: right;
  background-color: red;
}

<div class="top">
  <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
  <div class="inner"></div>
  <span>Html is good</span>
</div>

谢谢

Answer 1

使用 display: flex 的解决方案。

.top {
  display: flex;
}
.inner {
  border-bottom: 1px solid yellow;
  background-color: green;
  min-width: 50px;
  flex: 1;
}
a {
  background-color: #f5f5f5;
}
span {
  background-color: red;
}

<div class="top">
  <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
  <div class="inner"></div>
  <span>Html is good</span>
</div>