如何使用Tailwind将部分宽度的列对齐到容器右侧

问题根源 #

你的.sliding-section设置了margin-left: -25%，让区块向左侧超出屏幕范围。左侧文本列设置max-md:w-[70%]后，这个宽度是基于超出屏幕的父容器计算的，再加上max-md:pl-5的左内边距，直接导致内容跑到可视区域外，且缺少右对齐的规则。

解决方案 #

修改左侧文本容器的Tailwind类，替换左内边距为自动左外边距，让容器在小屏幕上自动右对齐，同时保留宽度设置：

修改后的左侧文本容器HTML代码

<div class="grid grid-cols-1 md:grid-cols-2 max-md:w-[70%] max-md:ml-auto">
  <div class="hidden-button flex items-center justify-center max-md:order-2 max-md:mt-5"><a href="#" class="more-button work-sans-medium">learn more</a></div>
  <div class="max-md:order-1">
    <p class="hid-text-com text-right work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p>
  </div>
</div>

额外说明 #

• max-md:ml-auto会让容器自动填充左侧剩余空间，从而实现右对齐，同时70%的宽度基于父容器的可用可视区域计算，不会再超出屏幕。
• 右侧文本列的max-md:pr-5和max-md:w-[70%]设置正常，无需修改。

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