Question

我正在尝试为IE实现display：box的替代方案，虽然我知道flexie旨在支持IE中的display：box，但我还是无法使用它，见here。

所以我试图找出一个简单的灵活宽度3列布局。我尝试过在网上找到的一些方法，但似乎没有一个方法适合我正在使用的HTML：

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

目前我正在使用以下CSS for IE：

.box {
    width: 100%;
}

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

但是你可以看到here，这并不是很好，因为随着浏览器窗口宽度的增加，右边框的右侧空间也会增大。如果我尝试使用大于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

简单灵活的宽度替代显示：IE的盒子？

1 个答案: