ieにおけるフレキシブルボックスモデルの実装について-私のcss

css 3の中の弾性箱モデルはみんなよく知られていませんが、ie 6で実現できますか?サードパーティ製ライブラリに含まれるページは少なく、一部のcssフレームワークではさまざまなレイアウトがサポートされています.次に、私が使用するボックスモデルのスタイルを示します(後でcopyを便利にするためです):

/***********************************

*      by awen

*  float   ，           dom           （float:right，   ）

************************************/

.shbox-item-l, .shbox-item-r {

    min-height: 1px;

    /*                    */

    _display:inline;

    /*hack ie6 dubble margin*/

}

.shbox-item-l {

    float: left;

}

.shbox-item-r {

    float: right;

}

/*    */

.shbox-item_l, .shbox-item-r, .shbox-item-flex {

    word-wrap: break-word;

    word-break: normal;

}

/*  flex,           float，          flex，   

* 1   box     flex

* 2 flex    margin    

* 3   flex ，ie6 ，flex    float    3  bug，

* 	    shbox-flex-l(  flex   float), shbox-flex-r(  flex   float)    ；

* 	              。

*/

.shbox-item-flex {

    overflow:hidden;

    _height: 1%;/*for ie6               ：_display:inline-block;*/

}

/*

 *ie6  flex    3  bug

*/

.shbox-flex-l {

    _margin-right:-3px;

}

.shbox-flex-r {

    _margin-left:-3px;

}

　　
次に例を見て、現在のページもieの下で効果を見ることができて、demoをダウンロードすることができます:
<!--
#content_test {
width: 600px;
margin:0 auto;
font-size:12px;
}
#inbox_test{
background-color: #ccc;
}
#content_test ul{
list-style:none;
margin:0;
padding:0;
}
.qleft {
width: 120px;
background-color: #f30;
}
.qright {
width: 120px;
background-color: #0ee;
}
.qright1 {
width: 120px;
background-color: #e0e;
}
.qcenter {
background-color: #0f3;
}
/*********************互換ボックスモデルby awen*****************************************
.shbox-item-l, .shbox-item-r {
min-height: 1px;
/*標準ブラウザで高さが設定されていないことによるレイアウトの乱れを防止*/
_display:inline;/*hack ie6 dubble margin*/
}
.shbox-item-l {
float: left;
}
.shbox-item-r {
float: right;
}
/*強制改行*/
.shbox-item_l, .shbox-item-r, .shbox-item-flex {
word-wrap: break-word;
word-break: normal;
}
/*シミュレーションflexは、一般的にはすべてfloatを使用しますが、特殊な場合はflexを使用できますのでご注意ください
*1つのboxは1つのflexのみをサポート
*2 flexでのカスタムmarginは無効です
*3 flexを使用した後、ie 6の下で、flexの左右の2つのfloatは3画素のバグを解決する必要があります.
* shbox-flex-l(flexの左側に対応するfloat)、shbox-flex-r(flexの右側に対応するfloat)の2つのスタイルを使用できます.
* もちろん厳密でなければ使わなくてもいいです.
*/
.shbox-item-flex {
overflow:hidden;
_height: 1%;/*for ie 6ドキュメントフロー小包防止もこれを使用できます:display:inline-block;*/
}
/*
*ie 6のflexには3画素バグがある場合があります
*/
.shbox-flex-l {
_margin-right:-3px;
}
.shbox-flex-r {
_margin-left:-3px;
}
-->

shbox-item-l

li2

li3

li4

li5

shbox-item-r

li2

li3

li4

li5

shbox-item-r

shbox-item-flex

shbox-item-l
shbox-item-r
oooooooooooooooooooooooooooooooooo