IE的display：box的簡單靈活寬度替代方法？

Question

我正在嘗試為IE實現display：box的替代方案，盡管我了解flexie旨在支持IE中對display：box的支持，但我仍無法使它正常工作，請參見此處 。

因此，我正在嘗試制定一個簡單的靈活寬度3列布局。 我已經嘗試了許多在網上找到的方法，但是似乎沒有一種方法適合我使用的html：

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

目前，我在IE中使用以下CSS：

.box {
    width: 100%;
}

.box1, .box2, .box3 {
    float: left;
    width: 29.5% !important;
    padding: 10px !important;
    height: 245px !important;
}

但是，正如您在此處看到的那樣，它並不是那么好，因為隨着瀏覽器窗口寬度的增加，右側框右側的空間也會增加。 如果我嘗試將框的寬度設置為大於29.5％，則當瀏覽器窗口的寬度減小時，右框將不適合。

誰能提供更好的解決方法？

Answer 1

嘗試顯式使用Flexie嗎？ （不依賴它來分析您的樣式）

假設您將類“ foo”添加到外部div，並為每個框添加適當的CSS：

CSS：

.box {
    width: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: justify;
    box-align: stretch;
}

.box1, .box2, .box3 {
    box-flex: 1;
}

JS：

var box = new Flexie.box({
    target : document.getElementById("foo"),
    orient : "horizontal",
    align : "stretch",
    direction : "normal",
    pack : "justify"
});

https://github.com/doctyper/flexie/blob/master/README.md