Css 浮动在div标签dosen'；我不能在Firefox中工作

在IE中正确显示，但在FF中不正确显示：

<div class="main_div" dir="rtl">
    <div class="outer_div" dir="rtl">
        <div class="textformatting" dir="rtl">
            <div class="inner_div"> text </div>
            <div class="inner_div"> Image </div>
        </div>
    </div>
    <div class="outer_div" dir="rtl">
        <div class="textformatting" dir="rtl">
            <div class="inner_div"> text </div>
            <div class="inner_div"> Image </div>
        </div>
    </div>
    <div class="outer_div" dir="rtl">
        <div class="textformatting" dir="rtl">
            <div class="inner_div"> text </div>
            <div class="inner_div"> Image </div>
        </div>
    </div>
</div>

---

“内部分区”中的浮动不起作用

如果在元素中添加填充，IE和FF会给出不同的结果。e、 g.如果您有一个宽度为100px的div和

填充：10px，即将为您提供一个宽度为100px的
，四周填充10px，内部空间宽度仅为80px。在FF中，它将为您提供宽度为100px的
，所有边的填充宽度为10px，这将为您提供宽度为120px的

记住border在总宽度上增加了1px，因为您使用的
width:50%
将使总宽度增加50%+1px，这就是为什么
inner\u div
没有正确地
float:right
的原因。但如果使用固定宽度，则可以使用
display:inline

无论如何，试试这个

<div class="main_div" dir="rtl">
<div class="outer_div" dir="rtl">
    <div class="textformatting" dir="rtl">
        <div class="inner_div"> text </div>
        <div class="inner_div"> Image </div>      
    </div>
</div>
<div class="outer_div" dir="rtl">
    <div class="textformatting" dir="rtl">
        <div class="inner_div"> text </div>
        <div class="inner_div"> Image </div>      
    </div>
</div>
<div class="outer_div" dir="rtl">
    <div class="textformatting" dir="rtl">
        <div class="inner_div"> text </div>
        <div class="inner_div"> Image </div>      
    </div>
</div>       

当我改变
宽度时：45%在
div.internal\u div
中，然后它工作，当我移除宽度时也是如此。那么我应该做什么才能工作良好？！您的div是否继承了一些边距或填充？这将使它们在声明宽度小于50%时正确显示。
<div class="main_div" dir="rtl">
<div class="outer_div" dir="rtl">
    <div class="textformatting" dir="rtl">
        <div class="inner_div"> text </div>
        <div class="inner_div"> Image </div>      
    </div>
</div>
<div class="outer_div" dir="rtl">
    <div class="textformatting" dir="rtl">
        <div class="inner_div"> text </div>
        <div class="inner_div"> Image </div>      
    </div>
</div>
<div class="outer_div" dir="rtl">
    <div class="textformatting" dir="rtl">
        <div class="inner_div"> text </div>
        <div class="inner_div"> Image </div>      
    </div>
</div>       

body{
    margin: 0px; 
    padding: 0px;
}
div.main_div{
    border:1px dotted #FFCC66; 
    border-width:thin; 
    background: #ffffaa; 
    width: 100%; 
    overflow:hidden;
}
div.outer_div{
    float: right; 
    width:33.33333%; 
    background-color:#FF0000;
}
div.textformatting{
    float: right; 
    margin:5px 10px; 
    border: dashed; 
    border-width:thin; 
    overflow:hidden; 
    width:95%;
}
div.inner_div{
    float: right; 
    width: 49%; 
    border: dotted; 
    border-width: thin;
}