Css 如何在移动屏幕尺寸上包装元素

发布于03月06日

我想让赞助的文本和图像在移动标志的底部包装，但弹性包装似乎不能做到这一点.我想要50x50的图像和"赞助商"的文字go 下面的80x80图像低于1024px(并排).谢谢

console.clear();

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


<div class="inline-block relative bottom-2 right-1">
  <span class="inline-flex items-center text-blue">
    <img src="https://placehold.co/80x80"/>
   
    <div class="flex justify-center text-black">
      <div class="mt-2 ml-0.5 sm:text-sm text-[10px] flex-wrap lg:flex">sponsored by</div>
      <img class="mt-0.25 pl-0.5 object-scale-down flex-wrap lg:flex" src="https://placehold.co/50x50" />
    </div>
  </span>
</div>

推荐答案

Flex-Wrap应用于它所应用的元素的子元素，因此您需要移动那个类.这将导致元素包装when there's not enough space.这个演示展示了这一点.

如果您希望在特定的断点处进行包装，那么对于小屏幕，您需要使用类似块级的包装，对于较大的屏幕，则需要转换为内联块.

console.clear();

.mobile {
  max-width: 150px;
}

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

<h2 class="mb-2">Full Width</h2>

<div class="inline-block_disabled relative bottom-2 right-1">
  <span class="inline-flex items-center text-blue">
    <img src="https://placehold.co/80x80"/>
   
    <div class="flex flex-wrap justify-center text-black">
      <div class="mt-2 ml-0.5 sm:text-sm text-[10px] lg:flex">sponsored by</div>
      <img class="mt-0.25 pl-0.5 object-scale-down lg:flex" src="https://placehold.co/50x50" />
    </div>
  </span>
</div>

<h2 class="mb-2">Mobile Width</h2>

<div class="inline-block_disabled relative bottom-2 right-1 mobile">
  <span class="inline-flex items-center text-blue flex-wrap ">
    <img src="https://placehold.co/80x80"/>
   
    <div class="flex justify-center text-black">
      <div class="mt-2 ml-0.5 sm:text-sm text-[10px] lg:flex">sponsored by</div>
      <img class="mt-0.25 pl-0.5 object-scale-down lg:flex" src="https://placehold.co/50x50" />
    </div>
  </span>
</div>