在 React 中将 div 与窗口的右侧对齐

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;

概述.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

您可以将类名分配给父div 并使用弹性框。