问我怎样才能使这些盒子具有相同的宽度？
EN

Stack Overflow用户

提问于 2020-01-01 20:33:02

回答 1查看 28关注 0票数 0

我怎样才能让这两个盒子(我会让它们更多)和最宽的盒子具有相同的宽度，使用的是tailwindcss only类？

<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
</head>
<body>
    <div class="flex flex-wrap">
      <div class="max-w-xs border">
        <div class="flex flex-col items-center pt-6 pb-6 px-10">
          <p class="font-bold text-xl mb-5">Company1</p>
          <img class="h-16 mb-5" src="https://via.placeholder.com/150" />
          <p class="mb-2 text-center font-bold">Junior Ruby on Rails Developer</p>
          <p class="text-sm">11500 - 17750 (B2B)</p>
        </div>
      </div>
      <div class="max-w-xs border">
        <div class="flex flex-col items-center pt-6 pb-6 px-10">
          <p class="font-bold text-xl mb-5">Company2</p>
          <img class="h-16 mb-5" src="https://via.placeholder.com/150" />
          <p class="mb-2 text-center font-bold">Ruby on Rails Developer</p>
          <p class="text-sm">11500 - 17750 (B2B)</p>
        </div>
      </div>
    </div>
</body>

<div class="flex flex-wrap">
  <div class="max-w-xs border">
    <div class="flex flex-col items-center pt-6 pb-6 px-10">
      <p class="font-bold text-xl mb-5">Company1</p>
      <img class="h-16 mb-5" src="https://via.placeholder.com/150" />
      <p class="mb-2 text-center font-bold">Junior Ruby on Rails Developer</p>
      <p class="text-sm">11500 - 17750 (B2B)</p>
    </div>
  </div>
  <div class="max-w-xs border">
    <div class="flex flex-col items-center pt-6 pb-6 px-10">
      <p class="font-bold text-xl mb-5">Company2</p>
      <img class="h-16 mb-5" src="https://via.placeholder.com/150" />
      <p class="mb-2 text-center font-bold">Ruby on Rails Developer</p>
      <p class="text-sm">11500 - 17750 (B2B)</p>
    </div>
  </div>
</div>

tailwind-css

回答 1

Stack Overflow用户

发布于 2020-01-01 20:39:55

将类flex-1添加到您的div <div class="max-w-xs border">。

// git diff

-  <div class="max-w-xs border">
+  <div class="max-w-xs border flex-1">

票数 0

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

原文链接：

https://stackoverflow.com/questions/59552542

复制

相似问题

问我怎样才能使这些盒子具有相同的宽度？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我怎样才能使这些盒子具有相同的宽度？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我怎样才能使这些盒子具有相同的宽度？
EN