reactjs - 如何使div内的元素跨越多行

问题描述

所以我只有这些 div：

所以基本上我已经创建了从一个组件到另一个组件的这些 div，就像这样，我有多个这样的文本，我希望它们中的每一个都跨越多行。示例：第一个 div 将在一行上显示最后的血压，在另一行上显示 90/60，依此类推我的代码：

卡.js：

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


function card ({type,value,subValue,date}) {
    return (
        <div 
        type={type}
        value = {value}
        subValue = {subValue}
        date = {date}
        className={type === "Last Blood Pressure" ? "blood-pressure" : 
        type === "Last Body Weight" ? "Body-Weight":
        type === "Last SpO2" ? "SpO2":
        type === "Last Glucose"?"Glucose":""}
        >
            {type}
            {value}
            {subValue}
            {date}
    </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 = [{ type: "Last Blood Pressure", value: "90/60",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { type: "Last Body Weight", value: "154",subValue:"13% Fat",date:"05/14/2020 04:12"},
    { type: "Last SpO2", value: "98%",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { type: "Last Glucose", value: "200",subValue:"",date:"05/14/2020 04:12"}
]

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

概述.css：

.cards{
    margin:1em;
    cursor:pointer;
    height: 90px;
    width:170px;
    border-radius: 10px;
    /* display:inline-block; */
    display: inline-flex;
    background-color:white;
    border:1px solid #57c0e8;
    padding-left: 0.4rem;
    padding-top: 0.3rem;
    font-size: 10px;
    text-align: left;
}

标签： reactjscomponents

reactjs - 如何使div内的元素跨越多行

问题描述

解决方案

推荐阅读