シンプルなフレキシブルな幅ディスプレイの代わり：IEのためのボックス？

Question

私はdisplay：boxの代わりにIEを実装しようとしていますが、flexieはIEのdisplay：boxのサポートを有効にするように設計されていることを理解していますが、これを得ることができませんでした。here

私は単純な柔軟な幅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; 
} 

しかしようにhereが表示されますが、ブラウザウィンドウの幅が大きくなるにつれて右のボックスの右側のスペースが大きくなるので、これはあまり大きくありません。ボックスの幅を29.5％より大きくしようとすると、ブラウザウィンドウの幅が縮小されたときに右のボックスが収まりません。

誰かがより良い回避策を助けることができますか？

Answer 1

Flexieを明示的にお試しください。

CSS：

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

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

JS：

は、あなたの外側のdivにクラス "foo" を追加し、各ボックスに適切なCSSを追加すると仮定すると、（自分のスタイルを分析し、それに頼っていません）

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