弹性列中的元素重叠

Question

我有一个间距问题，如何防止 Title 与数字相交？当柱子被迫靠得更近时，它们会重叠。我正在使用 Tailwind CSS。这是我的代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col w-full pt-28 px-56">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 lg:gap-24 xl:gap-36 pt-5">
        <div class="flex flex-wrap flex-row">
            <div class="flex-col w-1/12">
                <h4 class="text-xl font-bold">01</h4>
            </div>
            <div class="flex-col w-11/12">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-wrap flex-row">
            <div class="flex-col w-1/12">
                <h4 class="text-xl font-bold">02</h4>
            </div>
            <div class="flex-col w-11/12">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-wrap flex-row">
            <div class="flex-col w-1/12">
                <h4 class="text-xl font-bold">03</h4>
            </div>
            <div class="flex-col w-11/12">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-wrap flex-row">
            <div class="flex-col w-1/12">
                <h4 class="text-xl font-bold">04</h4>
            </div>
            <div class="flex-col w-11/12">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-wrap flex-row">
            <div class="flex-col w-1/12">
                <h4 class="text-xl font-bold">09</h4>
            </div>
            <div class="flex-col w-11/12">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
    </div>
</div>

Answer 1

以后你应该post你的CSS。文本只有一点点重叠，但添加一些 margin 会迫使它们分开。这会使您的标题溢出到下一行，因为它可以容纳文本，但不能容纳文本和 2 像素的边距。这可以通过给 div 更多工作空间来解决。

.flex-col {
    margin-right: 2px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col w-full pt-28 px-56">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 lg:gap-24 xl:gap-36 pt-5">
        <div class="flex flex-wrap flex-row">
            <div class="flex-col w-1/12">
                <h4 class="text-xl font-bold">01</h4>
            </div>
            <div class="flex-col w-11/12">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-wrap flex-row">
            <div class="flex-col w-1/12">
                <h4 class="text-xl font-bold">02</h4>
            </div>
            <div class="flex-col w-11/12">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-wrap flex-row">
            <div class="flex-col w-1/12">
                <h4 class="text-xl font-bold">03</h4>
            </div>
            <div class="flex-col w-11/12">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-wrap flex-row">
            <div class="flex-col w-1/12">
                <h4 class="text-xl font-bold">04</h4>
            </div>
            <div class="flex-col w-11/12">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-wrap flex-row">
            <div class="flex-col w-1/12">
                <h4 class="text-xl font-bold">09</h4>
            </div>
            <div class="flex-col w-11/12">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
    </div>
</div>

Answer 2

在列中添加边距会使文本溢出到下一行作为 Jesper 的回答。如果不需要固定列的宽度，解决此问题的一种方法是将第二列的宽度从 w-11/12 更改为 w-10/12 并添加一个 mr-2 到第一列

<div class="flex flex-wrap flex-row">
  <div class="flex-col w-1/12 mr-2">
    <h4 class="text-xl font-bold">01</h4>
  </div>
  <div class="flex-col w-10/12">
    <h4 class="text-3xl">Title</h4>
    <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
  </div>
</div>

添加上述更改后的效果如下：

弹性列中的元素重叠

Elements Overlap in Flex Column

html

css

tailwind-css