Saat ini saya mencoba menyelaraskan angka 238,741 dan huruf N di Number. Saat ini saya memiliki padding antara Prize Pool div dan Number Active div. Semuanya terkandung dalam induk dengan tampilan diatur ke flex dan flex-direction: kolom. Mereka kemudian berada di dalam wadah induk lain dengan tampilan fleksibel dan arah diatur ke baris. Saya mencoba mengatur bantalan yang berbeda antara div tetapi ketika saya memperbesar atau memperkecil mereka tidak mempertahankan posisinya.

Saya tidak tahu bagaimana membuatnya sejajar dan tetap sejajar saat memperbesar dan memperkecil atau masuk ke tampilan seluler. Saya telah menghabiskan 7 jam untuk itu dan membuat sedikit kemajuan dengan melalui trik CSS.

Kode:

  <Wrapper>
    <HeaderWrapper row alignItems="center">
      <PrizeText variant={TextVariant.subhead}>Prize Pool</PrizeText>
      <Text color={TextColor.primary} fontWeight="600" variant={TextVariant.subhead}>Number Active</Text>
      <GoldText style={{'padding-right': '26%'}} variant={TextVariant.display}>$7,162,245</GoldText>
      <GoldText color={TextColor.primary} variant={TextVariant.display}>238,741</GoldText>
    </HeaderWrapper>
  </Wrapper>
const HeaderWrapper = styled(Box)`
  height: auto;
  align-items: flex-start;
  /* border: 2px solid white; */
  flex-wrap: wrap;
  margin-top: 45px;
  margin-left: 32px;

`;
const MoneyWrapper = styled(Box)`
  height: auto;
  align-items: flex-start;
  /* border: 2px solid white; */
  flex-wrap: wrap;
  margin-left: 32px;

`;

const GoldText = styled(Text)`
  background-image: linear-gradient(98.84deg, #C9882B 0%, #E7CA66 47.71%, #C69935 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  white-space: nowrap;
`;

const PrizeText = styled(Text)`
  padding-right: 152px;
  color: ${props => props.theme.palette.text.primary};
  font-weight: 600;
  white-space: nowrap;
`;

const Wrapper = styled(Box)`
  position: relative;
  border: 2px solid white;
  width: 100%;
  /* justify-content: center; */
  align-items: center;
`;

Kotak hanyalah div, dengan tampilan diatur ke flex dan dapat mengambil prop col atau baris untuk mengubah arah flex.

enter image description here

1
javedb 2 Juni 2020, 03:17

1 menjawab

Jawaban Terbaik

Mungkin membantu untuk memikirkan kembali struktur komponen Anda. Jika Anda membungkus <PrizeText> dan <GoldText> dalam sebuah wadah dan <Text> dan <GoldText> dalam wadah lain maka semuanya akan cocok untuk Anda.

structure

Seperti ini:

.wrapper {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
}

.missing-wrapper {
  width: 50%;
}

h1, h5, div {
  border: 1px solid red;
}
<div class="wrapper">
  <div class="missing-wrapper">
    <h5>Prize Pool</h5>
    <h1>$7,162,245</h1>
  </div>
  <div class="missing-wrapper">
    <h5>Number Active</h5>
    <h1>238,741</h1>
  </div>
</div>
1
seanlenny 2 Juni 2020, 06:51