如何用Tailwind CSS调整网格布局中右侧Div的宽度并靠右？

问题原因 #

你用float无效是因为Grid布局的子元素（grid items）会忽略float属性，Grid有自己的布局规则来控制子元素的位置和对齐。

解决方案 #

下面提供两种符合Tailwind习惯的实现方式：

方式一：调整Grid列结构（更贴合Grid特性）

把外层Grid的列数改成4列，让左侧内容占2列（50%总宽），右侧内容占1列（25%总宽）并自动靠右：

<div class="grid grid-cols-1 md:grid-cols-4 mt-10 mb-10 px-4 mx-auto">
    <!-- Left Item -->
    <div class="flex flex-col w-full text-left text-gray-800 dark:text-gray-200 p-4 md:col-span-2">
        <h1 class="text-3xl md:text-4xl font-bold mb-4">About Project</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis ante, eleifend vitae turpis ultricies, eleifend ullamcorper ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas, metus id tempor elementum, libero libero consectetur tortor, nec auctor odio purus eget urna. Ut iaculis hendrerit leo in fringilla. Fusce euismod arcu tortor, sed rhoncus quam semper et. Vestibulum facilisis gravida nisi a commodo. Aenean tempus accumsan lectus, eget dapibus felis aliquet vel. Donec aliquet massa quis augue ullamcorper posuere.
        </p>
    </div>
    <!-- Right Item -->
    <div class="flex flex-col text-gray-800 dark:text-gray-200 bg-slate-300 dark:bg-[#101313] rounded-md p-4 md:col-span-1 md:justify-self-end">
        <h1 class="text-3xl md:text-4xl font-bold md:text-right">Useful Data</h1>
        <p class="max-w-md"></p>
    </div>
</div>

方式二：在原有2列Grid内调整子元素对齐

保持外层2列Grid不变，通过ml-auto让右侧子元素在自己的单元格内靠右，同时设置宽度为单元格的一半：

<div class="grid grid-cols-1 md:grid-cols-2 mt-10 mb-10 px-4 mx-auto">
    <!-- Left Item -->
    <div class="flex flex-col w-full text-left text-gray-800 dark:text-gray-200 p-4">
        <h1 class="text-3xl md:text-4xl font-bold mb-4">About Project</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis ante, eleifend vitae turpis ultricies, eleifend ullamcorper ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas, metus id tempor elementum, libero libero consectetur tortor, nec auctor odio purus eget urna. Ut iaculis hendrerit leo in fringilla. Fusce euismod arcu tortor, sed rhoncus quam semper et. Vestibulum facilisis gravida nisi a commodo. Aenean tempus accumsan lectus, eget dapibus felis aliquet vel. Donec aliquet massa quis augue ullamcorper posuere.
        </p>
    </div>
    <!-- Right Item -->
    <div class="flex flex-col md:w-1/2 text-gray-800 dark:text-gray-200 bg-slate-300 dark:bg-[#101313] rounded-md p-4 md:ml-auto">
        <h1 class="text-3xl md:text-4xl font-bold md:text-right">Useful Data</h1>
        <p class="max-w-md"></p>
    </div>
</div>

说明 #

• 方式一更适合需要精准控制列宽比例的场景，完全利用Grid的列系统实现布局
• 方式二更贴近你原本的代码结构，只需要修改右侧子元素的类名即可实现需求

内容的提问来源于stack exchange，提问作者youngP