我想要有相等元素的截面面积.一边是图像,另一边是内容.我使用的是Tailwind CSS,我觉得自己有正确的课程.section div被声明为Flex,而子元素的Flex base为0,Flex grow为1.content div仍然比image div大一点.

Current look

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

推荐答案

如果你删除你的p-6课程,并在下面的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>

Css相关问答推荐

为什么图像加载请求没有显示在我的网络请求中?

为什么我不能编辑垫按钮填充?

try 在Jekyll中使用多个SCSS文件时出错

如何在Delphi的TMS Web Core上向窗体添加背景图像

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能?

我怎样才能准确地获得虚构文本内容宽度的边距?

如何在悬停另一个部分的元素时使元素可见?

如何给三角形添加渐变?

如何在真实文本旁边制作文本阴影,使其看起来像 css 中的重复文本?

在revealjs/Quarto中定义一类反背景的幻灯片

CSS 媒体查询不为桌面版的圣杯响应式布局包装 Flexbox 容器元素

如何使用 TailwindCSS 禁用环形阴影?

CSS如何防止键盘向上移动内容?

如何在 Chrome 中模拟偏好 colored颜色 方案媒体查询?

纯 CSS 复选框图像替换

bootstrap.css 和 bootstrap-theme.css 有什么区别?

仅当存在 2 个类时,您可以使用 CSS 定位元素吗?

如何在 CSS 中给出背景图像路径?

仅使用 css 的换行符(如
)

如何在 Visual Studio 2017+ 中编译 Less/Sass 文件