时间戳

首页 > 解决方案 > 在 React 中水平对齐几个组件

css - 在 React 中水平对齐几个组件

问题描述

我有三大组成部分。其中两个占据屏幕的 1/3，我的目标是从左到右水平呈现它们。

当只是把它们放在我添加的代码中时，它们会一个接一个地垂直呈现，导致用户向下滚动以找到它们。如何在屏幕上水平显示它们？（我用css尝试了几件事但没有成功）。

这是返回方法，Tables 组件内部包含两个不同的表：

 return (
      <div>
        {title} <Chat />
        <Tables/>}

      </div>
    );

标签： cssreactjs

解决方案

你应该看看 flexboxes ！

您可能知道，React 允许您创建组件，因此您可以像使用 flexbox 的 html 元素一样设置它们的样式。

绝对阅读这篇文章！

编辑：示例

HTML：

<div class="flexbox-container">
    <div>Element1</div>
    <div>Element2</div>
    <div>Element3</div>
</div>

CSS：

.flexbox-container {
    display: flex;
    flex-direction: row;
}

这将使您的元素水平对齐，间距均匀！尝试使用容器的边距和 justify-elements 来对齐元素。

推荐阅读