Question

我使用以下css来获得三个均匀间隔且大小合适的宽度灵活的盒子：

.box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    width: 100%;
    text-align: justify;
    margin: 20px 0;
}

.box1, .box2, .box3 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    width: 30%;
    padding: 5px;
}

.box2, .box3 {  
    margin-left: 20px;
}

html的格式为：

<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

您可以在here上看到我正在使用的页面。

这在Safari中运行良好，但在Firefox中，框的宽度不均匀。而是每行中的第一个框足够宽以适合内容，而后两个框占据宽度的其余部分。我想知道是否有人可以帮助我使用这个CSS来让它在Firefox中运行。

谢谢，

尼克

Answer 1

似乎width:0是当前布局灵活框的方式（来自http://hotmeteor.com/2011/04/22/equals-widths-using-the-css3-flexible-box-layout-module/）

将.box1, .box2, .box3 CSS选择器的width:30%更改为width:0会修复Firefox布局，但仍可在Chrome中使用。

使用-moz-box在Firefox中获取相同宽度的框

1 个答案: