如何并排放置 3 个 div？没有容器？答案

【问题标题】：How to have 3 div side by side? No container?如何并排放置 3 个 div？没有容器？
【发布时间】：2021-10-10 00:39:13
【问题描述】：

我正在尝试在屏幕上平均设置 3 个 div 的样式。每个都应该有相同的样式，因为我正在尝试构建一个可重用的块。

<div class="w-1/3 float-left flex flex-row></div>
<div class="w-1/3 float-left flex flex-row></div>
<div class="w-1/3 float-left flex flex-row></div>

唯一接近的解决方案是拥有

float: left;

但它没有填充后面的容器？结果是卡片都在页面上方。

【问题讨论】：

后面的容器是什么意思？你能显示问题的图片吗？谢谢

标签： css tailwind-css

【解决方案1】：

对于相同的样式，您可以在 style.css 上创建样式

我喜欢这样创建相同宽度的解决方案；

<div class="flex">
  <div class="flex-1 ..."></div>
</div>

【讨论】：

【解决方案2】：

我建议使用inline block 解决方案，如下例所示：

<div class="bg-blue-100 h-10">
<div class="bg-yellow-600 w-3/12 h-10  inline-block "></div>
<div class="bg-green-600 w-3/12 h-10  inline-block "></div>
<div class="bg-purple-600 w-3/12  h-10  inline-block "></div>
</div>

【讨论】：

【解决方案3】：

你想把它们都放在同一行吗？

【讨论】：