Javascript DIV的水平布局-哪种方法最好

创建水平三列div布局似乎有多种方法：

位置：相对/绝对

浮动：左/右；与保证金：0自动；中央分区

浮动：左；所有部门

显示表格/表格单元格

关于哪种方法是最佳实践以及每种方法的优缺点的任何想法

谢谢

Edit1：编辑以包括线高度的示例

Edit2：我忘了提到的一个要求是，所有的柱子都应该具有相同的高度，谢谢@LGSon指出这一点

Edit3：添加了新方法-4。显示表格/表格单元格。我知道这感觉不对，但在没有其他有效解决方案的情况下，这似乎是目前最好的选择

1。位置：相对/绝对；
左
行2
中间的
右
行2




2.浮动：左/右；与保证金：0自动；中央分区
左
行2
右
行2
中间的


3.浮动：左；所有部门
左
行2
中间的
右
行2


4.显示表格/表格单元格
左
行2
中间的
右
行2

一般来说，使用

flexbox

，这是一种最新和现代的布局方式，当一个人无法使用或无法用

flexbox

解决问题时，另一个人的布局方式有时也会近在咫尺，尽管这种情况非常罕见

使用

flexbox

您可以获得灵活性，下面是一篇关于它的精彩文章：

.mainContent{
显示器：flex；
宽度：95%；
保证金：0自动；
}
.mainContent>div{
弹性基准：33.33%；
}
.mainContent>div:n子级（1）{
背景颜色：蓝色；
}
.mainContent>div:n子级（2）{
背景颜色：绿色；
}
.mainContent>div:n子级（3）{
背景颜色：黄色；
}

左边
中间的
正当

以下是我的选项摘要：

您的第一个示例（Position:Absolute）--我会避开它，因为根据定义，它对不同的屏幕宽度和设备没有响应

第二个示例（Float:[mixed]）--这一个可以工作，但它需要大量硬编码Float值，这使得以后很难编辑或应用于其他布局，例如每行有四个项目。以可重用性为目标

第三个示例（float:left）--如果您希望所有内容都左对齐，但其他内容都不对齐，则此方法肯定有效

---

我同意@LGSon；Flexbox是一个不错的选择，除非你想在网格系统中使用Bootstrap或类似的框架：

有时候简单是最好的选择。我会坚持第三种选择，但正如你看到的，你必须给保证金属性一个正值

我将使用此解决方案解决您的问题：

HTML代码

<div class="left blue">Left</div>
<div class="left green">middle</div>
<div class="left yellow">right</div>

---

使用bootstrap和gridsThanks Simon，但是寻找纯Javascript解决方案，任何关于bootstrap工作原理背后的实际Javascript的想法。从我看到的情况来看，示例1似乎对改变屏幕宽度做出了响应。flexbox的问题是flexbox中缺少支持是不错的，但在IE8/9中不受支持，IE8/9约占7%的用户。@NickC我们需要了解更多信息，如示例和/或详细解释，说明这些列是否应该是响应/可包装的、等高、从左到右等。。。什么时候我们才能给出一个正确的答案，因为现在给出的问题的答案必须是它取决于。。。在与推荐的组合中，我没有考虑柱高度，但现在你提到这是一个问题。所有列的高度都应该相等，并且只有一个与最大列一样大。现在使用display:table/table cell添加了新方法。@NickC因为您需要支持IE8和/或IE9，

display:table

是正确执行您要求的唯一方法。。。更新了我的答案对我来说不太合适，右边的方块换成了新线。

.left {
  float: left;
  width: 33%;
  margin: 10px 2px;
 }

.blue {
  background-color: blue;
}

.green {
  background-color: green;
 }

.yellow {
  background-color: yellow;
 }