Поплавок в теге div не работает в Firefox - PullRequest
Новая
       1

Поплавок в теге div не работает в Firefox

0 голосов
/ 27 сентября 2010

В 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>

======================= 

body{
    margin: 0px;
    padding: 0px;
}

div.main_div{
    border: dotted; 
    border-width: thin;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background: #ffffaa;
    border-color: #FFCC66;
    width: 100%;
    float: right;
}

div.outer_div{
    float: right;
    width:33%;
}

div.textformatting{
    float: right; 
    padding-bottom : 5px;
    padding-top  : 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: dashed;
    border-width:thin  
}

div.inner_div{
    float: right;
    width: 50%;
    border: dotted;
    border-width: thin;
}

Поплавок в "Inner_div" не работает!

1 Ответ

1 голос
/ 18 января 2011

IE и FF дают различный результат, если вы добавите заполнение в ваш элемент. например если у вас есть div с width:100px; и padding:10px;, IE даст вам <div> с шириной 100px с отступом 10px со всех сторон, что даст вам только 80px ширину пространства внутри. В то время как в FF это даст вам <div> с шириной 100 пикселей и 10 отступами по всей стороне, что даст вам ширину 120 пикселей <div>.

Помните, что граница дает дополнительные 1px на общую ширину, так как вы использовали width:50%, что составит 50% + 1px, поэтому ваш inner_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>

=============================================== =============== 

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;
}
...