CSS divs：display：table alternative？ [英] CSS divs: display:table alternative?

问题描述

 < div id =wr> 
< div id =con> 
< div id =unknownWidth>一些宽度未知的框< / div> 
< / div> 
< div id =knownWidth>< / div> 
< / div> 
 
 #wr {
 width：300px; 
 height：100px; 
 border：1px纯红色; 
保证金：50px; 
} 
 #knownWidth {
 width：100px; 
 height：30px; 
 margin：0px auto; 
 border：1px纯灰色; 
} 
 #unknownWidth {
 height：30px; 
 margin：0px auto; 
 border：1px纯蓝色; 
} 
  

这里是链接到小提琴：
http://jsfiddle.net/7EsMR/

是否可以避免在 #unknownWidth 框中使用 display：table 并保持其提供的功能相同？

需要它在IE7中工作，而不是IE6。 ：D

所需结果：
http：

谢谢;）

解决方案

您可以在子项中使用 display：inline ， text-align：center 在包装上：

http：// jsfiddle。 net / 3snzb / 2 /

<div id="wr">
    <div id="con">
        <div id="unknownWidth">some box with unknown width</div>
    </div>
    <div id="knownWidth"></div>
</div>

#wr {
    width:300px;
    height:100px;
    border:1px solid red;
    margin:50px;
}
#knownWidth {
    width:100px;
    height:30px;
    margin:0px auto;    
    border:1px solid gray;
}
#unknownWidth{
    height:30px;
    margin:0px auto;    
    border:1px solid blue;
}

Here is link to fiddle: http://jsfiddle.net/7EsMR/

Is it possible to avoid using display:table on #unknownWidth box and keep the same functionality as it offers?

Need it to work in IE7, but not IE6. :D

Required result: http://jsfiddle.net/7EsMR/1/

Thanks ;)

解决方案

You can use a combination of display: inline on the child and text-align: center on the wrap:

http://jsfiddle.net/3snzb/2/

这篇关于CSS divs：display：table alternative？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！