使内部 div 宽度动态化

Question

我想把剩余宽度给.inner div。同时它的兄弟姐妹（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>

Answer 2

如果您可以更改代码中元素的顺序，则无需 flex 即可实现，如下所示：

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

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

使内部 div 宽度动态化

Make inner div width dynamic

html

css

width