使用顺风 css 的两列之间的响应式分隔器

Posted 2023-03-07

【中文标题】使用顺风 css 的两列之间的响应式分隔器

【英文标题】：responsive divider between two column using tailwind css

【发布时间】：2021-12-30 01:52:59

【问题描述】：

从 dribble 设计中获得灵感，其中两列由中间的一行或文本隔开，我尝试做同样的事情，但我无法在中间显示 or 文本，如果它的上方和下方有垂直线它不是移动设备，否则带有相同或文本的水平分隔符。

这是我试图模仿的设计

这是我的代码以及顺风游乐场

<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-1xl sm:p-20">
    <div class="grid sm:grid-cols-3 gap-4">
      <div>
        <h1 class="font-bold text-blue-500 text-lg">I want to sell</h1>
        <p class="text-sm font-light text-gray-400 pt-4 pb-4">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        <button class="bg-blue-500 text-white font-bold py-2 px-4">Sell</button>
      </div>
      <div class="or-divider">
        <p class="font-bold text-gray-500 rounded-full bg-gray-50 flex items-center justify-center text-sm" style="height: 50px; width: 50px;">or</p>
      </div>
      <div>
        <h1 class="font-bold text-blue-500 text-lg">I want to buy</h1>
        <p class="text-sm font-light text-gray-400 pt-4 pb-4">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        <button class="bg-blue-500 text-white font-bold py-2 px-4">Buy</button>
      </div>
    </div>
  </div>
</div>

@tailwind base;
@tailwind components;
@tailwind utilities;

.or-divider:after, .or-divider:before 
  display: block;
  content: '';
  width: 2px;
  background-color: #9994;
  height: 100%;

https://play.tailwindcss.com/detgHQImBz?file=css

【参考方案1】：

根据您的代码，我做了以下修改

将网格模板从 3 列更改为 2 列，以使屏幕尺寸大于小尺寸 当屏幕尺寸大于小时，使用border-r类在第一列右侧创建垂直线 当屏幕尺寸小于small时，使用border-b类在第一个元素的底部创建水平线 absolute 将“或”对象 relative 定位到第一个元素

在带有代码的 sn-p 下方：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-1xl sm:p-20">
    <div class="grid sm:grid-cols-2 gap-4">
      <div class="border-b sm:border-b-0 sm:border-r p-8 relative">
        <h1 class="font-bold text-blue-500 text-lg">I want to sell</h1>
        <p class="text-sm font-light text-gray-400 pt-4 pb-4">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        <button class="bg-blue-500 text-white font-bold py-2 px-4">Sell</button>
        <div class="hidden sm:block absolute right-0 transform translate-x-7 top-1/2 -translate-y-7">
          <p class="font-bold text-gray-500 rounded-full bg-gray-50 flex items-center justify-center text-sm" style="height: 50px; width: 50px;">or</p>
        </div>
        <div class="sm:hidden absolute transform bottom-0 left-1/2 translate-y-6 -translate-x-7">
          <p class="font-bold text-gray-500 rounded-full bg-gray-50 flex items-center justify-center text-sm" style="height: 50px; width: 50px;">or</p>
        </div>
      </div>
      <div class="p-8">
        <h1 class="font-bold text-blue-500 text-lg">I want to buy</h1>
        <p class="text-sm font-light text-gray-400 pt-4 pb-4">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        <button class="bg-blue-500 text-white font-bold py-2 px-4">Buy</button>
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢它的工作。但是，边界线不会触及卡片的顶部和底部。

感谢您的回答。实际上，由于应用了paddingclasses (px-4 py-10 sm:p-20)，这条线不会触及卡片的顶部/底部。删除这些类，该行将触及顶部/底部。将这些类添加到子元素（应用 grid 类的位置）以保持与顶部/底部接触线的填充！