Question

所以我创建了这4个div：

它们当前在左侧垂直对齐，我希望它们彼此相邻并在窗口右侧水平对齐。我试过的是添加内联flex但我希望div的宽度是静态的，所以它不起作用，而且我尝试了正确的浮动，但是div的顺序弄乱了，所以我试图反转顺序但也没有工作。

card.js：

import React from 'react';
import '../Card/Card.css'

function card ({title,value,subValue,date}) {
    return (
        <div>
            <div className="title">
            {title}
            </div>
            <div className="value">
            {value}
            </div>
            <div className="sub-value">
            {subValue}
            </div>
            <div  className="date">
            {date}
            </div>
        </div>  
    )
}

export default card;

overview.js：

import React from 'react';
import Card from '../../components/widgets/Card/Card';
import '../../pages/Overview/Overview.css';

const Overview = (props) => {

    const measurment = [{ title: "Last Blood Pressure", value: "90/60",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { title: "Last Body Weight", value: "154",subValue:"13% Fat",date:"05/14/2020 04:12"},
    { title: "Last SpO2", value: "98%",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { title: "Last Glucose", value: "200",subValue:" ",date:"05/14/2020 04:12"}
]

    return (
        measurment.map(measurment => {
            return (
                    <div  className="cards">
                        <Card
                        title={measurment.title} 
                        value={measurment.value}
                        subValue={measurment.subValue}
                        date={measurment.date}
                        />
                    </div>        
                    )
                }
        )
    )
}
export default Overview;

css代码：

.cards{
    margin:1em;
    cursor:pointer;
    height: 120px;
    width:180px;
    border-radius: 10px;
    background-color:white;
    border:1px solid #57c0e8;
    padding-left: 0.4rem;
    padding-top: 0.3rem;
}

.card-element{
    color: lightslategray;
}

.title {
    color:grey;
    font-size: 12px;
    text-align: left;
}

.value{
    font-size: 32px;
    text-align: center;
}

.sub-value {
    text-align: right;
    margin-right: 10px;
}

.date {
    color:lightslategrey;
    text-align: right;
    margin-right: 10px;
    font-size: 11px;
    display: flexbox;
    margin-bottom: 0px;
}

我的代码：https://codesandbox.io/live/wp9QOw

Answer 1

尝试使用此：

import React from "react";
import Card from "../Card/card";
import "../components/Overview.css";

const Overview = props => {
  const measurment = [
    {
      title: "Last Blood Pressure",
      value: "90/60",
      subValue: "85 BPM",
      date: "05/14/2020 04:12"
    },
    {
      title: "Last Body Weight",
      value: "154",
      subValue: "13% Fat",
      date: "05/14/2020 04:12"
    },
    {
      title: "Last SpO2",
      value: "98%",
      subValue: "85 BPM",
      date: "05/14/2020 04:12"
    },
    {
      title: "Last Glucose",
      value: "200",
      subValue: " ",
      date: "05/14/2020 04:12"
    }
  ];

  return(
    <div style={{display: 'flex', justifyContent:'flex-end'}}>
      {
        measurment.map(measurment => {
          return (
            <div className="cards">
              <Card
                title={measurment.title}
                value={measurment.value}
                subValue={measurment.subValue}
                date={measurment.date}
              />
            </div>
          );
        })
      }
    </div>
  )
};
export default Overview;

Answer 2

您可以将className分配给父div并使用flexbox。

在div中将div对齐到窗口的右侧

2 个答案: