Question

我有一部手风琴，我一直在开发并且有浮动图像的问题。每当图像高于同一div中的文本时，图像溢出在下一个手风琴h3标签顶部的div之外。我在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中的手风琴分配“display：block”。有趣的是，它在Chrome和后来的IE中分配了“display：inline-block”。

您可以在段落块之后添加一个清除图像浮动的元素：

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

或尝试将“overflow：auto”添加到父元素 - 来自http://css-tricks.com/all-about-floats/的“溢出方法”：

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

浮动图像溢出手风琴div

1 个答案: