Question

我无法控制html。我有一个有多个孩子的父母，只有其中一些必须在同一排，而其余的则不受影响，其中一个必须占用所有多余的空间。内容是自动生成的，％不是选项。

也欢迎使用除行内放置在同一行之外的其他选项来避免该问题。

.parent {
  background: red;
}

.same-row-child {
  background: green;
  display: inline-flex;
}

<div class="parent">
  <div class="other-child">A</div>
  <div class="same-row-child">B</div>
  <div class="same-row-child">C</div>
</div>

总结：第一行中的Α不受影响。 B + C与B占据了所有多余空间。

Answer 1

如果该想法是使用flex，那么它应该是flex框的父元素：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

display:flex; display:inline-flex;为其所有直接子代启用了弹性上下文。

.parent {
  background: red;
  display: flex;
  flex-wrap: wrap;
}

.other-child {
  width: 100%;
}

.same-row-child {
  background: green;
}

.parent :last-child {
  flex: 1;
  margin-left:2px;
}

<div class="parent">
  <div class="other-child">A</div>
  <div class="same-row-child">B</div>
  <div class="same-row-child">C</div>
</div>

似乎不是您要使用的选项 查看下一个选项

最早的方法是float和overflow，而float的方法则是首先出现并应自行缩小的方法。< / p>

请参见https://css-tricks.com/all-about-floats/

除了在图像周围包裹文字的简单示例之外，浮点数还可用于创建整个Web布局。

.parent {
  background: red;
}

.other-child {}

.same-row-child {
  float: left;
  background: green;
  margin-right: 2px;
}

.parent :last-child {
  float: none;
  overflow: hidden;
  margin: 0;
}

<div class="parent">
  <div class="other-child">A</div>
  <div class="same-row-child">B</div>
  <div class="same-row-child">C</div>
</div>

多个兄弟姐妹，将一些兄弟姐妹放在同一行中并填充多余的空间

1 个答案: