html - 如何水平对齐子组件以占据容器宽度的一定百分比？

Question

我有以下格式的三个不同的 React 组件:

<Container className={"parent"}>
    <h2>Heading</h2>
    <Tabs className={"childOne"}/>
    <Info className={"childTwo"}/>
</Container> 

上述每个子组件都呈现其他子组件和原生 html 标签，如 <div> s 和 <span> s。
这就是我希望组件在浏览器上呈现的方式:

我曾尝试使用 CSS flex-box 来实现这一点.但是，子组件仅占用其内容的宽度，我无法将它们的宽度分别分配到容器的 66% 和 33%(中间有一些间隙)。这是我试过的 CSS:

.parent {
  display: flex;
  flex-direction: row;
}

.childOne {
  flex-basis: 70%;
}

.childTwo {
  flex-basis: 30%;
}

我也试过 display: inline-block;和 float:left在每个子组件上，但这甚至没有将子组件水平对齐。
有人可以告诉我如何实现这一目标吗？谢谢!

Answer 1

最简单的方法是使用 flexbox。这里有一个例子。您可以根据需要添加任意数量的列。
基于 Bootstrap 5 的代码。

.row{
  display:flex;
  flex:1 0 100%;
  flex-wrap:wrap;
}
.row > *{
  flex-shrink:0;
  width:100%;
  max-width:100%;
}
.col-4{
  flex:0 0 auto;
  width:33.333333%;
}
.col-8{
  flex:0 0 auto;
  width:66.666667%;
}
/*DEMO*/*{box-sizing:border-box}.col-4,.col-8{padding:1.5rem;border:1px solid red}

<div class="row">
  <div class="col-8">A</div>
  <div class="col-4">B</div>
</div>