如何使用css在一个div中一个接一个地返回对齐项目并做出反应？

Question

代码如下，

const renderInfo = () => {
    return (
        <>
            <div>Name</div>
            <div>Name1</div>
            <div>Type</div>
            <div>Type1</div>
        </>
    );
};

我希望它显示如下，

但目前在上面的代码中是这样显示的

谁能帮我解决这个对齐问题。谢谢。

Answer 1

或者您可以在 div 中设置样式，如下所示：

<div style={{ display: "block" }}>
  <div>Name</div>
  <div>Name1</div>
  <div>Type</div>
  <div>Type1</div>
</div>

Answer 2

将其包装在容器中之后，您可以使用flexbox、display: block 等。

使用弹性盒

.container {
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div>Name</div>
  <div>Name1</div>
  <div>Type</div>
  <div>Type1</div>
</div>

使用display: block

.container {
  display: block;
}

<div class="container">
  <div>Name</div>
  <div>Name1</div>
  <div>Type</div>
  <div>Type1</div>
</div>