问网格元素在尾风CSS中同时增长
EN

Stack Overflow用户

提问于 2021-02-15 20:39:45

回答 1查看 876关注 0票数 2

我正试图在Tailwind中创建两个并排的容器，以实现independently.的增长。

我的问题是，它们是同时增长的，即当我点击一个问题时，两个容器的大小都会增加。我只想从所选的问题中培养出一个。

我也尝试过使用flexbox，但是结果是一样的。

这是密码

<div class="mt-10 mx-20 grid gap-14 md:grid-cols-2">
  <!-- First container (left) -->
  <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
    <h1 class="text-xl font-bold py-2">Container 1</h1>
    <div>
      <details class="pt-6 pb-4">
        <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
          Question
        </summary>
        <span class="pt-2 pr-8">Answer</span>
      </details>
    </div>
  </div>
  <!-- Second container (right) -->
  <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
    <h1 class="text-xl font-bold py-2">Container 2</h1>
    <div>
      <details class="pt-6 pb-4">
        <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
          Question
        </summary>
        <span class="pt-2 pr-8">Answer</span>
      </details>
    </div>
  </div>
</div>

下面是小提琴 Obs:您必须在中等断点或更高的位置设置屏幕才能看到

css

tailwind-css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-15 20:47:46

只需将items-start添加到网格容器中：

<html>

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="mt-10 mx-20 grid gap-14 md:grid-cols-2 items-start">
    
      <!-- First container (left) -->
      <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
        <h1 class="text-xl font-bold py-2">Container 1</h1>
        <div>
          <details class="pt-6 pb-4">
            <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
              Question
            </summary>
            <span class="pt-2 pr-8">Answer</span>
          </details>
        </div>
      </div>
      
      <!-- Second container (right) -->
      <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
        <h1 class="text-xl font-bold py-2">Container 2</h1>
        <div>
          <details class="pt-6 pb-4">
            <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
              Question
            </summary>
            <span class="pt-2 pr-8">Answer</span>
          </details>
        </div>
      </div>
      
    </div>
  </body>

</html>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66215104

复制

相似问题

问网格元素在尾风CSS中同时增长
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网格元素在尾风CSS中同时增长EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网格元素在尾风CSS中同时增长
EN