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

Posted 2023-02-22

【中文标题】如何水平对齐子组件以占据容器宽度的一定百分比？

【英文标题】：How to align child components horizontally to occupy a certain percentage of the container's width?

【发布时间】：2020-10-17 10:02:12

【问题描述】：

我有三个不同的 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，但这甚至没有将子组件水平对齐。

有人可以告诉我如何实现这一目标吗？谢谢！

【问题讨论】：

你应该使用引导程序

bootstrap 不适合我 - 我需要使用一些自定义设计库。

【参考方案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-8padding:1.5rem;border:1px solid red

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

【讨论】：

我需要实际使用引导程序吗？

您不需要使用引导程序。这是一个标准的 flexbox :)

这是我通过您的解决方案得到的输出：imgur.com/Wq1cYUR。有什么我可以改变的吗？

可能你和其他 CSS 有冲突？容器呢？

Container其实就是一个简单的。那里没有自定义 CSS。

【参考方案2】：

您在两者上都使用了flex-basis: 50%，这将是相等的，而不是您所期望的。 也许让childOne flex-basis 为 70%？

您还可以在 childOne 上创建 flex: 2，在 child 2 上创建 flex: 1。

这是一个代码示例：https://codepen.io/jsmohamed/pen/XWXaMbp

【讨论】：

抱歉，发布问题时出现错误。我确实尝试了 70% 和 30%。问题已更正

这是我通过您的解决方案得到的输出（与其他答案相同）：imgur.com/Wq1cYUR