Question

我想将剩余宽度提供给 .inner div。与此同时，它的兄弟姐妹（a＆amp; span标签）可以是动态宽度。

有什么想法吗？代码如下＆amp;在https://jsfiddle.net/pge8rqw0/

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

由于

Answer 1

使用display: flex解决方案。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

如果您可以更改代码中元素的顺序，那么您可以在不使用flex的情况下实现它，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

使内部div宽度动态

2 个答案: