显示两个符合 React 的 div答案

【问题标题】：Display two div's in line with React显示两个符合 React 的 div
【发布时间】：2019-11-12 18:09:29
【问题描述】：

我试图在一行中显示两个div 的内容，所以我用另一个div 包裹它们并将其display 属性设置为flex。两个 div 显示在同一行，但一个在另一个之上，而不是相邻。

这是我的组件的代码：

            <TableFooter>
                <TableRow>
                  <div className="crud-footer">
                    <div className="col-6">
                      <TablePagination
                        count={data.length}
                        rowsPerPage={rowsPerPage}
                        page={page}
                        onChangePage={this.handleChangePage}
                        onChangeRowsPerPage={this.handleChangeRowsPerPage}
                      />
                    </div>
                    <div className="col-6 crud-controls">
                      <Fab className="jr-fab-btn bg-blue text-white">
                        <i className="zmdi zmdi-plus zmdi-hc-fw"/>
                      </Fab>
                      <Fab className="jr-fab-btn bg-yellow text-white">
                        <i className="zmdi zmdi-edit zmdi-hc-fw"/>
                      </Fab>
                      <Fab className="jr-fab-btn bg-red text-white">
                        <i className="zmdi zmdi-delete zmdi-hc-fw"/>
                      </Fab>
                    </div>
                  </div>
                </TableRow>
              </TableFooter>

这是 div 的 css：

.crud-footer {
  display: flex;
  flex-direction: row;
}

.crud-controls {
  display: flex;
  text-align: right;
}

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

如果不知道您使用的是什么 css 框架 - 如果有的话，或者看到更多 css，很难确定问题。

快速查看这些类，您可能在 div crud-footer 上为两个子 col-6 列缺少父类 row 。也许只是忽略了从您的 css 框架中添加 <div className="crud-footer row">。

【讨论】：

【解决方案2】：

尝试在您的容器上设置justify-content。根据您要查找的布局类型，将其设置为 flex-start 或 space-between。

见：https://www.w3schools.com/cssref/css3_pr_justify-content.asp

还要确保您的容器有足够的空间来容纳两者。（例如width: 100%）

【讨论】：