如何处理不同的利润？答案

【问题标题】：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;

我将不胜感激。谢谢！

【问题讨论】：

标签： html css reactjs flexbox styled-components

【解决方案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，感谢您花时间和精力向我解释它。但是，明确设置宽度对于响应式网站来说不是一个好习惯，尤其是在您的内容不同的地方。所以，这不会解决我的问题，但还是谢谢你。 ?