漂浮在Firefox中

div標籤這麼想的工作在IE中顯示正常，但在FF沒有正確顯示：漂浮在Firefox中

<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」不起作用！

來源

2010-09-27 user458975

當我改變'寬度：45％;''div.inner_div''然後它的作品，當我刪除寬度。 – jcubic 2010-09-27 18:10:58

那麼我應該怎麼做才行？！ – user458975 2010-09-27 21:11:47

你的div是否繼承了一些空白或填充？這會導致它們在聲明寬度小於50％時顯示正確。 – Kyle 2010-09-28 07:16:29

如果您在元素中添加填充，則IE和FF會給出不同的結果。例如如果你有一個與width:100px;和padding:10px;的div，IE會爲你提供一個寬度爲100px的<div>，在所有的邊上都有10px的填充，這給你的內部空間只有80px的寬度。在FF中，它會給你<div> 100px寬度和10px填充所有面，這將給你總共120px寬度<div>。

記得邊框給人的總寬度上附加的1px的，因爲你用width:50%，這將使50％+ 1像素，這就是爲什麼你的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; 
}

來源

2011-01-18 09:40:28 fesh

漂浮在Firefox中

回答

相關問題