时间戳

首页 > 解决方案 > 将组件与其下方的另一个组件并排反应

css - 将组件与其下方的另一个组件并排反应

问题描述

我正在使用 React，我想并排放置 2 个组件，并在屏幕中间下方放置一个按钮。我试图做这样的事情：

<div>
    <div>
        <div style={{float:'top'}}>...</div>
        <div>...</div>
    </div>
    <button />
</div>

这两个组件如我所愿并排，但按钮仅位于第二个（右侧）组件下方。
有人对如何解决它有建议吗？
谢谢您的帮助。

标签： cssreactjs

解决方案

您可以更新您的样式，以便button包含在与上述两个元素类似的父级中，然后您可以使用以下样式将按钮置于上述两个元素下方的中心：

.container {
    width: fit-content;
}

.row {
    display: flex;
    flex-flow: row;
    justify-content: center;
}

.row > *:not(:last-child) {
    margin-right: .5rem;
}
<div class="container">
    <div class="row">
        <div>First element</div>
        <div>Second element</div>
    </div>
    <div class="row">
        <button>button</button>
    </div>
</div>

请注意，在 React 代码中，您需要将class属性重命名为className.

将 CSS 添加到 React

要在你的 React 项目中包含 CSS，你可以style.css在你的组件所在的目录中创建一个名为的新文件。所以你可能有文件结构：

MyComponent/
    index.jsx
    style.css

然后在您的组件文件中（index.jsx在本例中），将 CSS 文件导入文件import "./style.css"顶部。

推荐阅读