在兩列中映射div元素

我正在嘗試將任意數量的 div 放入 2 列，如果 div/元素是奇數，那么最后一個會在兩列的中心進行調整，如下所示..

但目前我將每個 div 放在一行中。

-

這是我的代碼。

import "./styles.css";
import Typography from "@material-ui/core/Typography";

export default function App() {
const sampleDetails = {
sampleObservations: [
  {
    observationsId: 7,
    selected: true,
    value: "12:53",
    parentId: 2,
    name: "Time"
  },
  {
    observationsId: 4,
    selected: true,
    value: "11.4",
    parentId: 2,
    name: "Ph"
  },
  {
    observationsId: 8,
    selected: true,
    value: "12-03-21 2:06",
    parentId: 3,
    name: "Flow Date"
  },
  {
    observationsId: 9,
    selected: true,
    value: "120",
    parentId: 3,
    name: "Frequency"
  },
  {
    observationsId: 10,
    selected: true,
    value: "20",
    parentId: 3,
    name: "Sample Count"
  }
]
};

return (
<div className="App">
  <h1>Hello CodeSandbox</h1>
  <div
    style={{
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-around",
      marginBottom: "30px"
    }}
  >
    <div>
      {sampleDetails.sampleObservations.map(function (item, i) {
        return (
          <div
            key={i}
            style={{
              flexDirection: "row",
              display: "flex",
              justifyContent: "space-around",
              alignItems: "left"
            }}
          >
            <h4 variant="subtitle1" style={{ marginRight: "5px" }}>
              {item.name}:
            </h4>
            <Typography>{item.value}</Typography>
          </div>
        );
      })}
    </div>
  </div>
  </div>
  );
}

運行示例可以在代碼沙箱中找到：https ://codesandbox.io/s/stoic-cherry-trc7n?file=/src/App.js

uj5u.com熱心網友回復：

將顯示 flex 和 flex 方向放在父元素 (tradeWaterGrabSample) 而不是子元素上。還為您的每個孩子添加一個key=屬性以map()使反應快樂。

{sampleDetails.sampleObservations.map(function (item, i) {
  return (
    <div
      key={i}     <---- add key= attribute
      style={{

uj5u.com熱心網友回復：

你試過網格嗎，試著用類名“tradeWaterGrabSample”把它添加到你的div中

style={{ display: "grid", gridTemplateColumns: "auto auto" }}

<div className="App">
      <h1>Hello CodeSandbox</h1>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "auto auto",
          flexDirection: "row",
          justifyContent: "space-around",
          marginBottom: "30px"
        }}
      >
        <div style={{ display: "grid", gridTemplateColumns: "auto auto" }}>
          {sampleDetails.sampleObservations.map(function (item, i) {
            return (
              <div
                key={i}
                style={{
                  flexDirection: "row",
                  display: "flex",
                  justifyContent: "space-around",
                  alignItems: "left"
                }}
              >
                <h4 variant="subtitle1" style={{ marginRight: "5px" }}>
                  {item.name}:
                </h4>
                <Typography>{item.value}</Typography>
              </div>
            );
          })}
        </div>
      </div>
    </div>

如果這是您想要的（我不確定我是否理解您的目標），您可以將此樣式添加到您的類名中，而不是添加行內樣式

標籤：

上一篇：將使用java和SpringBoot框架創建的微服務中的一組ipAdresses列入黑名單

下一篇：知道如何將樣式道具傳遞給@paypal/paypal-jsPayPalButtons組件嗎？