Question

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

我尝试了this recommendation，但是没有用。

这是我组件的代码：

            <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;
}

Answer 1

在不知道使用什么CSS框架的情况下-如果有的话，或者看到更多的CSS，很难确定问题所在。

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

Answer 2

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

请参阅：https://www.w3schools.com/cssref/css3_pr_justify-content.asp

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

显示与React一致的两个div

2 个答案: