html - 在一个 div 中设置两个内联子元素的样式，以便左边的子元素占据最大宽度

Question

我有一个 div 包含两个内联子项。 像..

<div>
    <span> stuff </span>
    <span> more stuff with variable length </span>
<div>

我想让我的第二个 child 占据它需要的任何宽度，然后让第一个 child 成为 100% - 第二个 child 的宽度。使两个子级内联。

是否有针对此问题的仅 css/less 解决方案？

Answer 1

这可能可以使用 flex 属性来实现，但这里是我如何使用 float 让它工作的。请注意，我将跨度更改为 div - 可能可以通过将跨度设置为 display:block 来实现此目的，但我只是觉得这样更简洁。此外，一个重要的方面是 div 的顺序； float 排在第一位，这样“rest”部分的内容就可以基于它剩下的内容。

.outer {
  width: 100%;
  height: 300px;
  }

.outer > div {
  height: 100%;
  }

.fill {
  display: inline-block;
  float: right;
  background-color: green;
  }

.rest {
  overflow: hidden;
  background-color: red;
  }

<div class="outer">
  <div class="fill">This will use up as much space as it needs to</div>
  <div class="rest">Fill content</div>
  
</div>