IE的display：box的简单灵活宽度替代方法？

Question

I am trying to implement an alternative to display:box for IE, and though I understand that flexie is designed to enable support for display:box in IE, I haven't been able to get this working, see here .

So I am trying to work out a simple flexible width 3 column layout. I have tried a number of methods I found online, but none seem to fit with the html I am using:

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

At present I am using the following CSS for IE:

.box {
    width: 100%;
}

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

But as you can see here , this isn't so great, as the space to the right of the right box grows as the width of the browser window is increased. If I try a width of greater than 29.5% for the boxes then the right box does not fit when the width of the browser window is reduced.

Could anyone help with a better workaround?

Answer 1

Try using Flexie explicitly? (not relying on it analyzing your styles)

Assuming you add the class "foo" to your outer div, and add the appropriate CSS for each box:

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