jquery - 在 css 中组织行和列

Question

我有两行三列，但第二行的前两列被下推了。为什么？？？ :)

这是我的 fiddle 只需点击“纽约”http://jsfiddle.net/q9cfa6qu/13/

/* accordion header */
 .accordion  h2 {
     background:#A91414;
     width:250px;
     font-size:18px;
     font-weight:bold;
     cursor:pointer;
     color: #fff;
     margin:15px;
     text-align:center;
     text-transform:uppercase;
     float:left;padding:9px 50px 9px 50px;
  }

 /* accordion header */
.accordion2 h2 {
     background:#000;
}

/* currently active header */
.accordion h2.current {
     cursor:default;
     background-color:#B40404;

}
/* currently active header */
.accordion2 h2.current {
    cursor:default;
    background-color:#000;
}
/* accordion pane */
.accordion .pane {
    display:none;
    padding:15px;
    color:#fff;
    font-size:16px;
    float:left;
    width:99%;
}

Answer 1

你的h2按钮

<h2>Kitchen Kabaret
    409 Glen Cove Rd.
    Roslyn Heights, NY</h2>

与父商店 h2 按钮的高度相撞!如果你看看 1 号和 2 号店，它们比第三家高(是这个词吗:)？)。.accordion h2 中的 15px 边距让子 h2 float 到第三个位置，然后在下一行继续。要解决这个问题，您应该将带有图像的商店按钮设置为固定高度。也许你应该为此给他们一个单独的类(class)，这样你就不会影响你的国家 h2 按钮。