使用 Flex Box Tailwind 的元素不相等 CSS
Elements not equal using Flex Box Tailwind CSS
我有一些截面区域,我希望它们具有相同的元素。一面只是图像,而另一面有内容。我正在使用 Tailwind CSS 并确信我有正确的 类。 Divs 部分被声明为 Flex,而每个子元素的 Flex-basis 为 0,Flex grow 为 1。内容 div 仍然比我的图像 div 稍大。
<section class="section-one flex flex-col-reverse md:flex-row-reverse">
<div class="basis-0 grow p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div>
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
<a href="#" class="font-fraunces uppercase z-1">Learn More</a>
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
<div class="basis-0 grow">
<img src="images/desktop/image-stand-out.jpg" alt="" class="w-full" />
</div>
</section>
通过使用网格你可以做到这一点
Here is the best explanation how to use grid system in tailwindcss
我已经为您制作了代码,请在此处查看:https://play.tailwindcss.com/wldkQ1txrU
如果您删除 p-6 class 并在下面添加 div,它将起作用。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="section-one flex flex-col-reverse md:flex-row-reverse">
<div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div class="p-6"> <!-- add here your padding -->
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
<a href="#" class="font-fraunces uppercase z-1">Learn More</a>
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
<div class="basis-0 grow">
<img src="https://via.placeholder.com/500" alt="" class="w-full" />
</div>
</section>
<section class="section-one flex flex-col-reverse md:flex-row-reverse ">
<div class="basis-0 grow">
<img src="https://via.placeholder.com/500" alt="" class="w-full" />
</div>
<div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div class="p-6"><!-- add here your pading -->
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
<a href="#" class="font-fraunces uppercase z-1">Learn More</a>
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
</section>
我有一些截面区域,我希望它们具有相同的元素。一面只是图像,而另一面有内容。我正在使用 Tailwind CSS 并确信我有正确的 类。 Divs 部分被声明为 Flex,而每个子元素的 Flex-basis 为 0,Flex grow 为 1。内容 div 仍然比我的图像 div 稍大。
<section class="section-one flex flex-col-reverse md:flex-row-reverse">
<div class="basis-0 grow p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div>
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
<a href="#" class="font-fraunces uppercase z-1">Learn More</a>
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
<div class="basis-0 grow">
<img src="images/desktop/image-stand-out.jpg" alt="" class="w-full" />
</div>
</section>
通过使用网格你可以做到这一点
Here is the best explanation how to use grid system in tailwindcss
我已经为您制作了代码,请在此处查看:https://play.tailwindcss.com/wldkQ1txrU
如果您删除 p-6 class 并在下面添加 div,它将起作用。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="section-one flex flex-col-reverse md:flex-row-reverse">
<div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div class="p-6"> <!-- add here your padding -->
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
<a href="#" class="font-fraunces uppercase z-1">Learn More</a>
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
<div class="basis-0 grow">
<img src="https://via.placeholder.com/500" alt="" class="w-full" />
</div>
</section>
<section class="section-one flex flex-col-reverse md:flex-row-reverse ">
<div class="basis-0 grow">
<img src="https://via.placeholder.com/500" alt="" class="w-full" />
</div>
<div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div class="p-6"><!-- add here your pading -->
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
<a href="#" class="font-fraunces uppercase z-1">Learn More</a>
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
</section>