时间戳

首页 > 解决方案 > 将 2 个组件放在同一行

javascript - 将 2 个组件放在同一行

问题描述

在这个组件中，我在顶部有一个图像，然后<ItemsContainer/>在底部有两个其他组件（内部），它们显示为不同的行。我想把另外两个项目（一个网格和一个图表）放在一行中，我已经尝试过使用 flex direction，但它似乎对我不起作用。这可能会发生，因为我已经flex-direction: column;在父组件中使用了。

    <main className='content'>
    <img src={poly} alt="charts" className="charts" />
    <div className="heading">
    Heading Text
    </div>
    <span> The he text goes here. </span>
  <div className="regressionSetup">
    <ItemsContainer/>
    </div>
      </main>

.content{
    padding-left: 260px;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.popup{
    padding-bottom: 20px;
}

.charts{
    align-self: center;
    height: 350px;
    width: 800px;
}

.heading{
    font-size: 25px;

}

.regressionSetup{
    flex-direction: row;
}

在此处输入图像描述

物品容器：

        return(
            <div className="container">
            <PointDrawer addCoord={this.addCoord.bind(this)} 
                resetCoords={this.resetCoords.bind(this)}/>
            <RegressionSetup
                order_graph_1={this.state.order_graph_1}
                order_graph_2={this.state.order_graph_2}
                setOrders={(orders: any) => this.setState(orders)}
            />
            <Graph x={this.state.x_array} y={this.state.y_array} 
                deg={this.state.order_graph_1} width={800} 
                color={this.color_graph_1} />
</div>)

css

.container {
    background-color: red;
    width: 100vw;
    flex-direction: row;
  }

如何解决此问题，使网格出现在左侧，图表出现在右侧但在同一行/行中？

标签： javascripthtmlcssreactjstypescript

解决方案

看起来您正在使用 Bootstrap。因此，列类表示您希望在每行可能的 12 个中使用的列数。因此，如果您想要 2 个等宽的列，您可以使用 .col-6。

代码如下所示ItemContainer：

<div className="container-fluid pt-4">
    <div className="row justify-content-center">
        <div className="col-6">
            <PointDrawer addCoord={this.addCoord.bind(this)} 
                resetCoords={this.resetCoords.bind(this)}/>
            <RegressionSetup
                order_graph_1={this.state.order_graph_1}
                order_graph_2={this.state.order_graph_2}
                setOrders={(orders: any) => this.setState(orders)}
            />
        </div>
        <div className="col-6">
            <Graph x={this.state.x_array} y={this.state.y_array} 
                deg={this.state.order_graph_1} width={800} 
                color={this.color_graph_1} />
        </div>
    </div>
</div>

更新：

如果您使用的是简单的 CSS，那么让我们尝试使用display: flex：

.container {
  background-color: red;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.container .item {
  width: 50%;
}
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>

所以你的代码看起来像这样：

 <div class="container">
    <div class="item" >
      <PointDraweraddCoord={this.addCoord.bind(this)} resetCoords={this.resetCoords.bind(this)} />
    </div>
    <div class="item">
      <RegressionSetup order_graph_1={this.state.order_graph_1} order_graph_2={this.state.order_graph_2}
        setOrders={(orders: any)=> this.setState(orders)}
        />
    </div>
  </div>

推荐阅读