Flex列中的元素重叠

Question

我有一个间距问题，如何防止标题与数字相交？当列被迫更接近时，它们就会重叠。我正在使用尾风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

在列中添加页边距会使文本溢出到下一行，作为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>

在添加上述更改时，如下所示：

​

​

Answer 2

在未来，你应该发布你的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>

​