Início / coding / Perguntas / 77219066
Accepted
Edson Ordaz
Asked: 2023-10-03 08:21:38 +0800 CST

como colocar uma divisória vertical que não fica completa no vento de cauda

  • 772

Estou tentando colocar um divisor x mas as linhas não chegam a 100%, mostro um exemplo de como quero:

imagem de como eu preciso disso

<div className="grid md:grid-cols-4 rounded-[48px] md:h-48 grid-cols-1 rounded-[48px] bg-quater mx-auto w-5/6 text-white
            md:divide-x divide-primary divide-inset">

            <div className="font-gmr text-2xl w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text1 } </div>
            <div className="font-raleway w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text2 } </div>
            <div className="font-gmr text-2xl w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text3 } </div>
            <div className="font-raleway w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text4 } </div>
</div>

mas com esse código fica assim, com as divisórias de baixo para cima

imagem de como ficou

tailwind-css

1 respostas

  1. Best Answer

    Você poderia considerar adicionar algum preenchimento vertical ao contêiner:

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="bg-green-400 mx-auto grid w-5/6 grid-cols-1 rounded-[48px] text-white md:h-48 md:grid-cols-4 md:divide-x md:py-5">
  <div class="font-gmr flex h-full w-full flex-col justify-center p-5 text-center text-2xl">{ language.secc2text1 }</div>
  <div class="font-raleway flex h-full w-full flex-col justify-center p-5 text-center">{ language.secc2text2 }</div>
  <div class="font-gmr flex h-full w-full flex-col justify-center p-5 text-center text-2xl">{ language.secc2text3 }</div>
  <div class="font-raleway flex h-full w-full flex-col justify-center p-5 text-center">{ language.secc2text4 }</div>
</div>

    • 0

relate perguntas