html - Multicol 元素在 Chrome 和 Firefox 之间的行为不同

Question

一个奇怪的多列问题使我无法按照我想要的方式进行布局。我试图让容器中的元素按列对齐。

<div class="container">
  <div class="element">lorem</div>
  <div class="element">ipsum</div>
</div>

这是一个 JSfiddle，它显示了我的意思: https://jsfiddle.net/2sobjo12/3/

如果您在 Chrome 或 Opera 中打开此 fiddle ，您将看到两个元素堆叠在一起。然而，在 Firefox 或 IE/Edge 中，它们是水平对齐的(这是我想要的方式)。

有谁知道是什么导致了这种行为？而且，更重要的是，我能做些什么来修复它？

--- 编辑 ---

为了澄清，让我解释一下我正在尝试做什么。有问题的容器是一个大型菜单，元素是所述容器中的子菜单。因此，我希望浏览器在容器中均匀分布子菜单，即使它们的高度可能有很大差异。比较 Chrome 和 Firefox 中的这个 fiddle ，看看我的意思:

https://jsfiddle.net/2sobjo12/15/

Firefox 做得很好，而 Chrome 出于某种原因坚持将第二个元素放在第一个元素下面，并将第四列完全留空。

Answer 1

在您的 CSS 中，添加 float:left。 float 属性指定元素是否应该 float 。它可用于将文本环绕在图像周围。

li {
  background: white;
  display: inline-block;
  width: 100%;
  margin: 0 0 5px 0;
  float:left;
}

按要求完成css

.container {
background: green;
width:100%;
float:left;
padding: 15px 15px 10px;
}

.container .element {
  background: white;
  display: inline-block; 
  margin: 0 10px 5px 0;
  float: left;
  width:25%

}