我有以下格式的三个不同的 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
在每个子组件上,但这甚至没有将子组件水平对齐。有人可以告诉我如何实现这一目标吗?谢谢!
最佳答案
最简单的方法是使用 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>
关于html - 如何水平对齐子组件以占据容器宽度的一定百分比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62600887/