移动端Div下方文本被覆盖，桌面端正常的响应式布局问题

不用<br>标签也能搞定你遇到的问题，给你几个适配响应式的Tailwind方案：

• 用响应式间距类控制上下距离
  给文本所在的div加mt-5 md:mt-0这类类名——移动端给5个单位的上边距，桌面端取消间距，确保文本始终在上方div的下方。如果上方div高度不固定，给它加min-h-[xxx]设置最小高度，再给文本div加mt-4，就能避免覆盖。

• 修正定位导致的文档流脱离
  检查上方div是不是用了absolute定位（这种定位会让元素脱离文档流，下方文本不会为它预留空间）。如果是，要么给父元素加relative，然后给文本div加pt-[上方div的高度]（比如pt-14 md:pt-0）；要么把absolute换成relative，让元素留在文档流里，自然就不会覆盖了。

• 用Flex布局切换排列方向
  给两个div的父元素加flex flex-col md:flex-row，移动端自动垂直排列，桌面端横向排列，再搭配space-y-4 md:space-x-4控制间距，这样不管什么屏幕尺寸，文本都不会覆盖上方div。

举个适配的代码例子：

<div class="flex flex-col md:flex-row space-y-4 md:space-x-4 p-4">
  <div class="bg-blue-100 p-4">上方div内容</div>
  <div class="bg-gray-100 p-4">这里的文本在移动端会自动排在下方，完全不会覆盖上方div</div>
</div>

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