Início / coding / Perguntas / 77956729
Accepted
erics15
Asked: 2024-02-08 01:17:28 +0800 CST

Layout de coluna flexível em tela menor, tentando fazer com que o texto fique próximo à imagem como está na área de trabalho

  • 772

Tenha este layout para um módulo. Preciso que o texto "título aqui" fique ao lado da imagem em telas pequenas, mas a barra de progresso e o texto de peças/projetos precisam ficar abaixo de como estão agora. O "coisa do título aqui" é finalizado, pois faz parte do div pai, mas não consigo descobrir como mantê-lo à direita da imagem. Alguma ideia? Código abaixo.

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col rounded-2xl bg-[#3B4E6A] md:flex-row">
  <div class="m-1 h-28 w-28 md:h-[100px] md:w-[100px] lg:h-[160px] lg:w-[160px]">
    <img src="https://placehold.co/160x160" />

  </div>
  <div class="w-full md:w-10/12">
    <p class="text-md mt-1 font-semibold text-white lg:text-2x">Title stuff here</p>
    <!--this part should go below the image and expand to the full width of the module - the bar ,the and the parts and projects text-->
    <div class="flex flex-wrap f">
      <div class="progressBar dark:bg-gray-progressBar h-[10px] w-full rounded-full bg-white sm:mb-3">
        <!-- Progress bar content here -->
      </div>
      <div class="mt-3 flex w-full text-white">
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Parts</span>
        </div>
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Projects</span>
        </div>
      </div>
    </div>
  </div>
</div>

css

1 respostas

  1. Best Answer

    Você pode considerar flutuar a imagem para a esquerda e fazer com que a barra de progresso limpe o flutuador:

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

<div class="rounded-2xl bg-[#3B4E6A] md:flex">
  <div class="m-1 h-28 w-28 md:h-[100px] md:w-[100px] lg:h-[160px] lg:w-[160px] float-left">
    <img src="https://placehold.co/160x160" />
  </div>
  <div class="w-full md:w-10/12">
    <p class="text-md mt-1 font-semibold text-white lg:text-2x">Title stuff here</p>
    <!--this part should go below the image and expand to the full width of the module - the bar ,the and the parts and projects text-->
    <div class="flex flex-wrap clear-both">
      <div class="progressBar dark:bg-gray-progressBar h-[10px] w-full rounded-full bg-white sm:mb-3">
        <!-- Progress bar content here -->
      </div>
      <div class="mt-3 flex w-full text-white">
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Parts</span>
        </div>
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Projects</span>
        </div>
      </div>
    </div>
  </div>
</div>

    Você também pode considerar um layout de grade. Em telas pequenas, aplique display: contentsno elemento o empacotamento do Título e demais conteúdos para fazer com que ele não exista para que seus elementos internos possam participar do layout da grade.

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

<div class="grid grid-cols-[max-content_1fr] rounded-2xl bg-[#3B4E6A] md:flex">
  <div class="m-1 h-28 w-28 md:h-[100px] md:w-[100px] lg:h-[160px] lg:w-[160px]">
    <img src="https://placehold.co/160x160" />
  </div>
  <div class="contents md:block md:w-10/12">
    <p class="text-md mt-1 font-semibold text-white lg:text-2x">Title stuff here</p>
    <!--this part should go below the image and expand to the full width of the module - the bar ,the and the parts and projects text-->
    <div class="flex flex-wrap col-span-full">
      <div class="progressBar dark:bg-gray-progressBar h-[10px] w-full rounded-full bg-white sm:mb-3">
        <!-- Progress bar content here -->
      </div>
      <div class="mt-3 flex w-full text-white">
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Parts</span>
        </div>
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Projects</span>
        </div>
      </div>
    </div>
  </div>
</div>

    • 2

relate perguntas