Question

我有一个div控制两个内联孩子。像...这样的东西。

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

我想让我的第二个孩子接受它需要的任何宽度，然后第一个孩子是100％ - 第二个孩子的宽度。这两个孩子都是内联的。

对此只有css / less解决方案吗？

Answer 1

这可能是使用flex属性可行的，但这是我如何使用float工作。请注意，我将跨度更改为div - 通过将跨度设置为display: block，可能可以执行此操作，但我觉得这更清晰。此外，这个的一个重要方面是div的 order ;漂浮是第一位的，所以＆＃34;休息＆＃34;部分的内容可以基于剩下的内容。

＆＃13;

.outer {
  width: 100%;
  height: 300px;
  }

.outer > div {
  height: 100%;
  }

.fill {
  display: inline-block;
  float: right;
  background-color: green;
  }

.rest {
  overflow: hidden;
  background-color: red;
  }

＆＃13;

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

＆＃13;

Answer 2

Flexbox可以做到这一点：

＆＃13;

div {
  border: 1px solid grey;
  display: flex;
  margin-bottom: 10px;
}
span {
  padding: 0 1em;
}
span:first-child {
  flex: 1;
  background: lightblue;
}

＆＃13;

<div>
  <span> stuff </span>
  <span> more stuff with variable length </span>
</div>

<div>
  <span> stuff </span>
  <span> lots and lots of more stuff with variable length </span>
</div>

＆＃13;

Answer 3

试试这个https://jsfiddle.net/2Lzo9vfc/123/

<强> HTML

<div>
    <span class="span-1"> stuff </span>
    <span class="span-2"> more stuff with variable length </span>
<div>

<强> CSS

div {
    display: table;
}
span {
    border: 1px solid black;
    padding: 5px;
    display: table-cell;
}

.span-1 {
    width: 100%;
}

.span-2 {
    white-space: nowrap;
}

在一个div中将两个内联子项设置为样式，以便左边的子项占用最大宽度

3 个答案: