Question

我正在Spring上创建任务管理器应用程序，并且遇到了问题-我需要创建许多表（它们将是任务的列），但是我需要将它们并排放置，而不是一个又一个地放置。< / p>

我的代码不会单独创建每个表，而是从数据库中获取所有数据，并仅借助一个表代码（请参阅下面的代码部分）来创建每个表：

<div th:switch="${col}"  > // table in database
    <div th:case="*"  >

        <table style="background-color: forestgreen; width:20%; float:left"  >

            <tbody>
            <tr th:each="col : ${col}">
                <td th:text="${col.name}"></td>

                <td style="width: auto"><a th:href="@{col_update/{id}(id=${col.id})}" class="btn btn-primary">Edit</a></td>
                <td style="width: auto"><a th:href="@{col_delete/{id}(id=${col.id})}" class="btn btn-danger">Delete</a></td>

            </tr>

            </tbody>
        </table>
        <p><a href="/col_create" class="btn btn-primary">Create new column</a></p>
    </div>

</div>

我尝试使用右对齐，内联块和其他一些解决方案，但没有帮助。如何使它们并排放置？

Answer 1

表格相互叠放的原因是因为每个表格都位于render() { const users = this.state.users.map((item, index) => { return <p>{item.name}</p> }); var resultsRender = []; let userList = []; for (var i = 0; i < users.length; i++) { userList.push(users[i]); if (i % 3 === 2) { resultsRender.push( <div className="clearfix"> {userList} </div> ); userList = []; } } return <div> {resultsRender} </div>; }元素内，该元素默认为100％宽度。因此，即使您的表格宽度为20％，每个表格也都有自己的全角父级，并将其置于彼此的下方。

您可以将宽度和布局CSS添加到表格中，而不必将其添加到表格的最外面的div中，这样div彼此并排排列，例如：

div

请注意，您可能要考虑使用CSS <div style="width:20%; float:left" th:switch="${col}" > // table in database <div th:case="*" > <table style="background-color: forestgreen;" > TABLE CONTENT HERE </table> <p><a href="/col_create" class="btn btn-primary">Create new column</a></p> </div> </div>或grid而不是flexbox或float，因为它们都会出现问题。

要使用CSS grid layout：

您只需要添加一个外部包装器来包含所有带表的div，然后将网格CSS应用于其中即可-您无需在任何子代上设置宽度，浮点数，显示等。

例如，要将表格的每一列设置为20％宽-或空间的1/5-您可以使用inline-block，例如

style="display: grid; grid-template-columns: repeat(5, 1fr);"

桌子没有水平排列

1 个答案: