如何处理不同的利润？
Posted
技术标签:
【中文标题】如何处理不同的利润？【英文标题】：How to deal with different margins? 【发布时间】：2021-11-10 19:46:15 【问题描述】：我目前正在处理一个项目，但遇到了一个样式问题。我正在使用带有样式组件的 react.js。我在列表中有不同的发票卡，每个卡的内容取决于来自 JSON 的数据。我的问题是间距，因为卡片元素的内容可能不同，我不能为它们分配固定的边距；如果我这样做，我会得到类似 Link to the image of the problem 而不是 what it should be 的东西。正如您在设计中看到的那样，它们应该处于同一水平。当我将 min-width 添加到 id、name 和 date 时，name 和 price 之间还有另一个间距问题。 这是我在这个组件中的代码。
import React from "react";
import styled from "styled-components";
import ReactComponent as RightIcon from "../../../images/icon-arrow-right.svg";
import data from "../data/invoices.json";
const InvoiceCardComponent = styled.li`
font-size: 1.2rem;
line-height: 1.5rem;
padding: 1.6rem 3.2rem;
box-shadow: 0px 10px 10px -10px rgba(72, 84, 159, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 8px;
background-color: $( theme ) => theme.colors.white;
&:not(:last-child)
margin-bottom: 1.6rem;
`;
const Id = styled.p`
font-weight: 700;
margin-right: 4.3rem;
`;
const HashTag = styled.span`
color: $( theme ) => theme.colors.shipCove;
`;
const Date = styled.p`
color: $( theme ) => theme.colors.baliHai;
margin-right: 4.5rem;
`;
const Time = styled.time``;
const Name = styled.p`
color: $( theme ) => theme.colors.baliHai;
`;
const Price = styled.p`
font-weight: 700;
font-size: 1.6rem;
line-height: 2.4rem;
margin-right: 4rem;
`;
const Status = styled.p`
margin-right: 2rem;
font-weight: 700;
color: $( theme ) => theme.colors.success;
text-transform: capitalize;
display: flex;
align-items: center;
background-color: $( theme ) => theme.colors.lightSuccess;
min-width: 10.4rem;
padding: 1.3rem 0;
display: inline-flex;
justify-content: center;
border-radius: 6px;
`;
const UserInfo = styled.div`
display: flex;
`;
const PaymentInfo = styled.div`
display: flex;
align-items: center;
`;
const StatusIcon = styled.span`
display: inline-block;
border-radius: 100%;
width: 8px;
height: 8px;
background-color: $( theme ) => theme.colors.success;
margin-right: 8px;
`;
const InvoiceCard = () =>
const renderInvoices = data.map((invoice) =>
const date = new window.Date(invoice.paymentDue);
const month = date.toLocaleString("en-US", month: "short" );
const day = date.getDate();
const year = date.getFullYear();
const formattedTotal = invoice.total.toLocaleString("en-US",
currency: "GBP",
style: "currency",
);
return (
<InvoiceCardComponent key=invoice.id>
<UserInfo>
<Id>
<HashTag>#</HashTag>
invoice.id
</Id>
<Date>
<Time dateTime=invoice.paymentDue>
Due day month year
</Time>
</Date>
<Name>invoice.clientName</Name>
</UserInfo>
<PaymentInfo>
<Price>formattedTotal</Price>
<Status>
<StatusIcon></StatusIcon>
invoice.status
</Status>
<RightIcon />
</PaymentInfo>
</InvoiceCardComponent>
);
);
return <React.Fragment>renderInvoices</React.Fragment>;
;
export default InvoiceCard;
我将不胜感激。谢谢！
【问题讨论】：
【参考方案1】：在这种情况下，您需要为每一行中的每一列显式设置width。
然后在每一列中，您可以根据需要进行任何样式的设置（text-align、flex 和 justify-content 等），因此同一列中的所有单元格都具有相同的样式。
.row-wrap
display: flex;
.col-wrap
background: red;
margin: 2px;
.col1
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
text-align: left;
.col2
width: 300px;
text-align: center;
.col3
width: 150px;
text-align: left;
.col4
width: 400px;
text-align: right;
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="row-wrap">
<div class="col-wrap col1">text</div>
<div class="col-wrap col2">text</div>
<div class="col-wrap col3">text</div>
<div class="col-wrap col4">text</div>
</div>
<div class="row-wrap">
<div class="col-wrap col1">
longgggggggggggggggggggggggggggggggggggggg text
</div>
<div class="col-wrap col2">text</div>
<div class="col-wrap col3">text</div>
<div class="col-wrap col4">text</div>
</div>
</body>
</html>【讨论】：
您好，Cuong Vu，感谢您花时间和精力向我解释它。但是，明确设置宽度对于响应式网站来说不是一个好习惯，尤其是在您的内容不同的地方。所以，这不会解决我的问题，但还是谢谢你。 ?以上是关于如何处理不同的利润？的主要内容，如果未能解决你的问题，请参考以下文章