如何使用 Tailwind CSS 创建类似于 Quora 的居中 3 列布局

Posted 2023-03-07

【中文标题】如何使用 Tailwind CSS 创建类似于 Quora 的居中 3 列布局

【英文标题】：How do I create a centred 3-column layout similar to Quora using Tailwind CSS

【发布时间】：2021-05-02 16:57:11

【问题描述】：

我正在尝试使用 Tailwind CSS 重新创建 Quora.com 主页的布局。目标是在标题部分之后有一个 3 列布局。我无法将列居中以使其与标题的居中相匹配。这是我目前所拥有的：

标记是：

  <div class="flex mb-7">
    <div class="w-full border shadow-sm h-12">
      <header>
        <div class="flex justify-center items-center space-x-6">
          <!-- Logo -->
          <div>
            <img src="images/logo.svg"  class="w-24 h-12">
          </div>

          <div class="flex items-center justify-center space-x-7">
            <!-- Home Icon -->
            <div class="hover:bg-gray-100">
              <button>
                <!-- svg icon here -->
              </button>
            </div>

            <!-- Following Icon -->
            <div class="hover:bg-gray-100">
              <button>
                <!-- svg icon here -->
              </button>
            </div>

            <!-- Answer Icon -->
            <div class="hover:bg-gray-100">
              <button>
                <!-- svg icon here -->
              </button>
            </div>

            <!-- Spaces Icon -->
            <div class="hover:bg-gray-100">
              <button>
                <!-- svg icon here -->
              </button>
            </div>

            <!-- Notifications Icon -->
            <div class="hover:bg-gray-100">
              <button>
                <!-- svg icon here -->
              </button>
            </div>

          </div>

          <!-- Search box -->
          <div class="hover:border-blue-500 w-72 h-9 pt-1 pb-1 pl-3 pr-2 bg-white border rounded-sm flex justify-between items-center relative">
            <button type="submit" class="mr-1 outline-none focus:outline-none active:outline-none">
              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-
                   viewBox="0 0 24 24" class="w-4 h-4">
                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
            </button>
            <input type="search" name="search" id="search" placeholder="Search Quora"
                   class="text-sm appearance-none w-full outline-none focus:outline-none active:outline-none"/>

          </div>

        <div class="flex items-center justify-center space-x-4">
          <div class="cursor-pointer hover:bg-gray-100 h-6 w-6 rounded-full  overflow-hidden object-cover">
            <img class="object-cover" src="https://images.unsplash.com/photo-1570724061670-86a53c509dee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60" >
          </div>

          <div class="hover:bg-gray-100 h-6 w-6">
            <button>
              <!-- svg icon here -->
            </button>
          </div>


          <span class="cursor-pointer hover:bg-red-800 text-sm bg-red-700 rounded-full px-2 py-1 text-white ">Add Questions</span>

        </div>


        </div>
      </header>
    </div>
  </div>
  <!-- Three columns -->
  <div class="flex px-10 mb-5 space-x-6">
    <div class="w-1/3 bg-gray-400 h-12"></div>
    <div class="w-1/3 bg-gray-500 h-12"></div>
    <div class="w-1/3 bg-gray-400 h-12"></div>
  </div>

我正在努力实现这一目标：

【参考方案1】：

您可以利用 网格布局 + max-w-7xl 和 mx-auto。查看此grid layout 以了解工作模式。

<div>
  <div class="bg-white shadow">
    <div class="max-w-7xl mx-auto py-1 bg-gray-100">
      Quora
    </div>
  </div>

  <div class="bg-gray-50">
   <div class="max-w-7xl mx-auto grid grid-cols-12 bg-gray-200">
     <div class="col-span-2">1</div>
     <div class="col-span-8 bg-gray-300">2</div>
     <div class="col-span-2">3</div>
   </div>
  </div>
</div>