浮動圖像溢出手風琴div

Question

我有一個手風琴，我一直在開發和浮動圖像有問題。每次圖像比同一個div中的文字都高時，圖像會在下一個手風琴h3標籤上溢出。我在http://vozpc.com/accordion.html有一個實例，我把所有的代碼放在那個文件中，這樣你就可以看到。我也會在這裏添加它。

CSS

#accordion div { 
    padding: 5px 10px; 
    width: 95%; 
    display: inline-block; 
} 

#accordion h3 { 
    display: block; 
    text-decoration: none; 
    outline: none; 
    cursor: pointer; 
    padding: 8px 11px; 
    font-family: Oswald, sans-serif; 
    letter-spacing: 1px; 
    font-weight: 700; 
    width: 95%; 
    margin: 5px; 
} 

#accordion div p { 
    margin-top: 0; 
} 

.icon-expand,.icon-collapse { 
    float: right; 
    margin-top: 5px; 
} 

.blue h3 { 
    background: #377ad0; 
    color: #fff; 
} 

HTML

<div class="blue" id="accordion"> 
    <h3>Enter Title 1</h3> 
    <div> 
    <img src="http://placehold.it/150x200" style="margin-right: 10px; float: left;"> 
    <p>Bacon ipsum dolor sit amet jerky capicola shank ball tip venison. 
    Prosciutto kielbasa chicken, pork loin shoulder fatback frankfurter 
    tenderloin short loin andouille capicola filet mignon. Turducken boudin 
    prosciutto pork, ball tip tri-tip pork belly pork loin. Frankfurter 
    kielbasa ball tip short ribs pork belly, ham hock chicken meatball 
    brisket beef flank jerky. Cow hamburger meatloaf doner short ribs 
    turducken ham tenderloin ground round flank jerky jowl corned beef 
    spare ribs. T-bone salami kielbasa boudin biltong short loin hamburger 
    beef pancetta sirloin tenderloin shank ball tip.</p> 
</div> 

<h3>Enter Title 2</h3> 

<div> 
    <p>Bacon ipsum dolor sit amet jerky capicola shank ball tip venison. 
    Prosciutto kielbasa chicken, pork loin shoulder fatback frankfurter 
    tenderloin short loin andouille capicola filet mignon. Turducken boudin 
    prosciutto pork, ball tip tri-tip pork belly pork loin. Frankfurter 
    kielbasa ball tip short ribs pork belly, ham hock chicken meatball 
    brisket beef flank jerky. Cow hamburger meatloaf doner short ribs 
    turducken ham tenderloin ground round flank jerky jowl corned beef 
    spare ribs. T-bone salami kielbasa boudin biltong short loin hamburger 
    beef pancetta sirloin tenderloin shank ball tip.</p> 

    <ul> 
     <li>List Item 1</li> 

     <li>List Item 2</li> 

     <li>List Item 3</li> 

     <li>List Item 4</li> 
    </ul> 
</div> 

<h3>Enter Title 3</h3> 

<div> 
    <p>Bacon ipsum dolor sit amet jerky capicola shank ball tip venison. 
    Prosciutto kielbasa chicken, pork loin shoulder fatback frankfurter 
    tenderloin short loin andouille capicola filet mignon. Turducken boudin 
    prosciutto pork, ball tip tri-tip pork belly pork loin. Frankfurter 
    kielbasa ball tip short ribs pork belly, ham hock chicken meatball 
    brisket beef flank jerky. Cow hamburger meatloaf doner short ribs 
    turducken ham tenderloin ground round flank jerky jowl corned beef 
    spare ribs. T-bone salami kielbasa boudin biltong short loin hamburger 
    beef pancetta sirloin tenderloin shank ball tip.</p> 
</div> 
</div> 

JAVASCRIPT

$(function() { 
    $("#accordion").accordion({ 
    heightStyle: "content", 
    collapsible: true, 
    active: false, 
    autoHeight: true 
    });   
    $("#accordion").accordion(); 
    $("#accordion").accordion("option", "icons", { 
    'header': 'icon-expand', 
    'activeHeader': 'icon-collapse' 
    }); 
}); 

Answer 1

發生這種情況是因爲手風琴分配 「顯示：塊」 在Firefox中的手風琴股利。有趣的是，它在Chrome和後來的IE中分配了「display：inline-block」。從http://css-tricks.com/all-about-floats/每「的溢流法」 - 「自動溢出」到父元素：

：

您可以添加您的段落塊後清除圖像浮動元素

<div class="blue" id="accordion"> 
    <h3>Enter Title 1</h3> 
    <div> 
     <img src...> 
     <p>Some description...</p> 
     <div style="clear:both;" /> 
    </div> 
    ... 

或者嘗試添加

#accordion div { 
    overflow:auto; 
    padding: 5px 10px; 
    width: 95%; 
}