Question

我试图让2个元素垂直显示。这应该可行，但在firefox 21上，元素会水平显示。

任何人都知道为什么以及如何解决它？

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
  width: 50%;   
  display: -moz-box;
  -moz-flex-direction: column;
 }    
#p1
{
  border:1px solid red;
}    
#p2
{
  border:1px solid blue;
}
</style>
</head>
<body>    
<div>
 <div id="p1">item1</div>
 <div id="p2">item2</div>
</div>  
</body>
</html>

Answer 1

您正在混合语法。您已使用旧语法（这是Firefox目前支持的）启用了flexbox，但您尝试使用新语法使它们垂直。

您需要使用-moz-box-orient: vertical;

div {
    width: 50%;
    display: -moz-box;
    -moz-box-orient: vertical;
}

http://jsfiddle.net/TPf3P/

Firefox很快就会使用最新的语法（没有前缀），所以你也应该包括它。此语法也适用于IE11，Opera和Chrome（在这种情况下使用-webkit-前缀）。

您还应该使用-webkit前缀添加旧语法，以便它可以在Safari中使用。 IE10也支持稍微不同的语法：

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

http://jsfiddle.net/TPf3P/1/

如何使弹性项目垂直显示而不是水平显示？

1 个答案: