主页 / coding / 问题 / 77956729
Accepted
erics15
Asked: 2024-02-08 01:17:28 +0800 CST

在较小的屏幕上灵活的列布局，尝试让文本保持在图像旁边，就像在桌面上一样

  • 772

模块有这样的布局。我需要将“此处的标题内容”文本保留在小屏幕上的图像旁边，但进度条和零件/项目文本需要位于现在的下方。“这里的标题内容”换行，因为它是父 div 的一部分，但不知道如何将其保留在图像的右侧。有任何想法吗？代码如下。

<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 个回答

  1. Best Answer

    您可以考虑将图像向左浮动，并让进度条清除浮动：

    <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>

    您还可以考虑网格布局。在小屏幕上，应用display: contents在包裹标题和其他内容的元素上，使其看起来好像不存在，以便其内部元素可以参与网格布局。

    <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

相关问题