主页 / coding / 问题 / 77955922
Accepted
erics15
Asked: 2024-02-07 23:13:37 +0800 CST

Flex 布局并尝试在某个断点以下进行 flex-wrap

  • 772

我有一个相对简单的布局，其中有一个包含一些内容的模块。我希望进度条和标记为“部分”和“项目”的文本位于图像下方，并在窗口低于 640 像素时扩展到模块的整个宽度。我所拥有的似乎不起作用，有什么想法吗？谢谢。在所有尺寸上，标题文本都应位于图像旁边。

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

<div class="rounded-2xl flex bg-[#3B4E6A]">
  <div class="flex">
    <div class="h-20 w-20 md:w-[160px] md:h-[160px] mr-1 md:mr-1 md:ml-0.5 flex-shrink-0 m-1">
      <img src="https://placehold.co/120x120">
    </div>
  </div>
  <div class="w-10/12">
    <p class="mb-9 text-white font-semibold text-lg lg:text-2xl mt-1 ">some stuff here</p>
    <div class="w-full bg-white rounded-full h-1 text-white"> Bar </div>
    <div class="flex mt-2 align-bottom sm:align-baseline">
      <div class="text-white mt-[12px]"><span class="font-medium"></span> <span>Item 1</span></div>
      <div class="text-white ml-1 mt-[12px]"><span class="font-medium"></span> <span>Item 2</span>
      </div>
    </div>
  </div>
</div>
</div>

css

1 个回答

  1. Best Answer

    要使进度条和标记为“部分”和“项目”的文本位于图像下方，并在窗口宽度低于 640 像素时扩展到模块的整个宽度，您可以使用响应式设计技术。您可以通过使用 Flexbox 和媒体查询调整布局来实现此目的。下面是修改后的代码：

    <div class="rounded-2xl flex flex-col md:flex-row bg-[#3B4E6A]">
    <div class="md:w-[100px] md:h-[100px] lg:w-[160px] lg:h-[160px] m-1 flex-shrink-0">
        <img src="https://placehold.co/400x400"> 
    </div>
    <div class="w-full md:w-10/12">
        <p class="mb-4 text-white font-semibold text-md lg:text-2xl mt-1 w-full xl:w-2/4"> 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">
            <div class="w-full bg-white progressBar dark:bg-gray-progressBar rounded-full h-[10px] sm:mb-3">
                <!-- Progress bar content here -->
            </div>
            <div class="flex w-full mt-3 text-white">
                <div class="w-1/2 md:w-auto flex items-center">
                    <span class="font-medium">1</span>
                    <span class="ml-1">Parts</span>
                </div>
                <div class="w-1/2 md:w-auto flex items-center">
                    <span class="font-medium">1</span>
                    <span class="ml-1">Projects</span>
                </div>
            </div>
        </div>
    </div>
</div>
    1. 将内容包装在弹性容器内，用于flex-col移动布局和md:flex-row更大的屏幕。
    2. 使用基于屏幕尺寸的类调整图像容器和内容容器的宽度（md:w-[100px], md:w-10/12）。
    3. 如果需要，用于flex-wrap允许内容换行到下一行。
    4. 调整了“部分”和“项目”文本的布局，以在较小的屏幕上采用全宽（w-full适用于移动设备和w-1/2较大的屏幕）。
    5. 添加了flex类以确保“零件”和“项目”文本正确对齐。
    • 1

相关问题