Question

一个奇怪的多列问题让我无法让布局看起来像我想要的那样。我试图让容器中的元素在列中对齐。

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

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

如果您在Chrome或Opera中打开这个小提琴，您会看到两个元素堆叠在一起。但是在Firefox或IE / Edge中，它们是水平对齐的（这就是我想要的方式）。

有谁知道造成这种行为的原因是什么？而且，更重要的是，我该怎么做才能解决它？

---编辑---

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

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

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

Answer 1

在你的css中，添加float：left。 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%

}

Multicol元素在Chrome和Firefox之间表现不同

1 个答案: