在response中，将divs对齐到窗口的右侧。

Question

所以我创建了这4个div。

它们目前是垂直排列在左侧，我想让它们水平排列在彼此旁边，并在窗口的右侧。 我试过添加内联flex，但我想让div的宽度是静态的，所以它没有工作，我也试过浮动右，但div的顺序是混乱的，所以我试过反转顺序，但也没有工作。

卡片.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.iolivewp9QOw

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

你可以给你的父div指定一个className，然后使用flexbox。