4

我正在尝试在 1 行上内联 3 个项目。每个项目都必须有一点空间。问题是当我添加边距时，第三项将换行。我已经尝试向父级添加负边距，但这不起作用。

我用我的问题做了一个例子，这个例子是使用tailwindcss：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

  <title>JS Bin</title>
</head>
<body>
<div class="flex flex-wrap -m-2">
  <div class="bg-red-500 w-1/3 p-4 m-2">
    test
  </div>  
  
   <div class="bg-red-500 w-1/3 p-4 m-2">
    test
  </div> 
  
   <div class="bg-red-500 w-1/3 p-4 m-2">
    test
  </div> 
</div>
</body>
</html>

我无法删除flex-wrap，因为它必须每 3 个项目包装一次，而且我不能使用padding.

我怎样才能让它工作？

4

7 回答 7

4

您的问题是您的 div 是其父级宽度的 1/3，但是当您在其中添加边距时，总宽度超过 100%。与被计算为元素宽度的一部分的填充不同，边距是元素宽度的补充。

所以这里有两种可能的解决方案。第一种是将宽度设置为父宽度减去所需边距的 1/3。由于您m-2在示例中使用了似乎是.5rem根据 Tailwind 的，因此我们将该数字加倍以考虑每个框右侧和左侧的边距，并最终得到以下结果：

.flex-wrap > div {
  width: calc(33.333333% - 1rem);
}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-wrap">
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
</div>

如果您不喜欢这样，第二个选项可以让您为每个 div 保留一个简单的 1/3 宽度，即在每个 div 上使用与背景颜色相同的边框。你的设计是否可能是必要的。显然，如果您有一个背景图像或者您的 div 应该根据设计具有边框，那么这可能不起作用（尽管您总是可以嵌套 div 以解决后一种情况下的问题）。

.flex-wrap > div {
  border: .5rem solid white;
}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-wrap">
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
</div>

于 2019-12-08T19:29:54.353 回答
2

您需要对您的 CSS 进行轻微修改。由于父宽度为 100%，每个子宽度为 33.33%，因此它不会容纳在一行中，同时包含边距。边距位于元素顶部，因此总宽度变为 > 100%，最后一个元素移动到新行。

所以，我们将calc在这里使用。我们需要以可以容纳边距的方式设置宽度。因此，如果 width = calc(33.33% - 20px)，这意味着每个 div 我们有 20px 的空间，可用于在每边提供 10px 的边距。为了保持一致性，请确保给定的余量是您从 33.33% 中减去的值的 50%。

更新了代码（添加了样式标签并相应地修改了 css）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

  <title>JS Bin</title>
  <style>
    .test {
      width: calc(33.33% - 20px);
      margin: 10px;
    }
  </style>
</head>
<body>
<div class="flex flex-wrap">
  <div class="bg-red-500 test p-4">
    test
  </div>  
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  <div class="bg-red-500 test p-4">
    test
  </div>  
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  
   <div class="bg-red-500 test p-4">
    test
  </div>
</div>
</body>
</html>

希望有帮助。恢复任何澄清。

于 2019-12-08T19:30:28.650 回答
2

如果像我一样，你不喜欢 using 的想法33.33333333% -1rem，你可以使用内置的 flexbox 属性。

只需flex: 1 0 0;为每个项目设置规则，如下面的片段所示。

最后一个0告诉 flexbox 忽略每个项目的初始 with，然后1告诉它增长直到项目一起达到 flexbox 容器的完整宽度。（第一个0告诉它不要缩小到小于它包含的文本。）

<!DOCTYPE html>
<html>

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

  <title>JS Bin</title>
  <style>
    .custom-flexbox-1 > div {
      flex: 1 0 0;
    }
    html {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="flex flex-wrap -m-2 custom-flexbox-1">
    <div class="bg-red-500 w-1/3 p-4 m-2">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 m-2">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 m-2">
      test
    </div>
  </div>
</body>

</html>

于 2019-12-08T19:39:26.307 回答
1

我不知道顺风，但使用香草 CSS，我可以通过 calc简单地为flex: 1;每个孩子和margin-right:not(:last-child)

当然，我也可以使用 CSS 网格轻松完成（在项目之间均匀分布）。如果您提前知道只有 3 列，则网格可能更容易：

.container {
  height: 100px;
  background: red;
  display: flex;
}
.child {
  background: blue;
  flex: 1;
}
.child:not(:last-child) {
  margin-right: 10px;
}

/* Grid way */
.container-grid {
  height: 100px;
  background: red;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-column-gap: 10px;
}
.child-grid {
  background: blue;
}

/* Even be easier if you know ahead that there're only 3 items */
.container-grid-3 {
  background: red;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.child-grid-3 {
  height: 100px;
  background: blue;
}
<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<hr>

<div class="container-grid">
  <div class="child-grid"></div>
  <div class="child-grid"></div>
  <div class="child-grid"></div>
  <div class="child-grid"></div>
</div>

<hr>

<div class="container-grid-3">
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
</div>

于 2019-12-08T19:45:13.107 回答
1

这肯定会根据您的链接标签起作用：

<div class="flex flex-wrap " style="justify-content: space-evenly;">
    <div class="bg-red-500 p-4 m-2 " style="width: 30%;">
      test
    </div>

    <div class="bg-red-500 p-4 m-2" style="width: 30%;">
      test
    </div>

    <div class="bg-red-500 p-4 m-2" style="width: 30%;">
      test
    </div>
  </div>

检查：https ://jsfiddle.net/sugandhnikhil/o62p7jez/

于 2019-12-08T19:59:16.127 回答
1

一个选项可以是使用透明边框代替边距和背景剪辑，以避免在边框下绘制背景。

.bg-red-500 {
  border: 0.5em transparent solid;
  background-clip: padding-box;/* do not draw me where borders stand */
}
<!DOCTYPE html>
<html>

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

  <title>JS Bin</title>
</head>

<body>
  <div class="flex flex-wrap m-2">
    <div class="bg-red-500 w-1/3 p-4 ">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 ">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 ">
      test
    </div>
  </div>
</body>

</html>

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

CSS 属性设置元素的background-clip背景是否延伸到其边框框、填充框或内容框下方。

于 2019-12-08T20:02:44.833 回答
0

我认为使用Tailwind - Gap通过显示网格更容易实现这一点

<div class="grid gap-3 grid-cols-2">
    <div>01</div>
    <div>02</div>
</div>
于 2021-12-15T12:05:20.567 回答