开发者

CSS alternative for display:box for IE and Opera?

开发者 https://www.devze.com 2023-03-24 00:16 出处:网络
I am using display:box for a flexible width div with three boxes of equal size and with equal spacing.This works fine for Firefox, Safari and Chrome, but not in IE and Opera.I am wondering what the be

I am using display:box for a flexible width div with three boxes of equal size and with equal spacing. This works fine for Firefox, Safari and Chrome, but not in IE and Opera. I am wondering what the best alternative method for IE and Opera would be. Here is the display:box CSS:

.box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    width: 100%;
}

.box1, .box2, .box3 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    width: 0;
}

.box2, .box3 {  
    margin-left: 20px;
}

And the HTML:

<div class="box">
<div class="box1"></div>
<di开发者_如何学JAVAv class="box2"></div>
<div class="box3"></div>
</div>

You can see it in action here.

I'd be glad to hear of an alternative method for achieving a similar result in IE and Opera.

Thanks,

Nick


Flexie implements support for this in browsers that do not natively support display: box;.

0

精彩评论

暂无评论...
验证码 换一张
取 消