Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
                        
                        2年前关闭。
                                                                                            
                
        
我有这个手风琴(javascript),它显示了单击按钮的内容。但是,我要做的是使内容在第一行下对齐。我有一排有7个按钮,下面有7个,依此类推。
有没有一种方法可以使每个按钮的内容在整行下方对齐?因此,如果按按钮1,则内容将在第一行下方对齐;如果按按钮9,则内容将在第2行下方对齐,依此类推。

码:



var acc = document.getElementsByClassName("row");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.row {
    color: grey;
    width: 13%;
    transition: 0.4s;
  margin: 0 auto;

}

.panel {
    max-height: 0;
    transition: max-height 0.2s ease-out;
    overflow: hidden;
    width: 100px;
    float: left;
    background-color: yellow;
}

<button class="row"> 1</button>
<div class="panel">
  <p>1 content</p>
</div>

<button class="row"> 2</button>
<div class="panel">
  <p>2 content </p>

</div>

<button class="row"> 3</button>
<div class="panel">
   <p>3</p>

</div>
<button class="row"> 4</button>
<div class="panel">
   <p>4 content</p>

</div>
<button class="row"> 5</button>
<div class="panel">
   <p>5 content</p>

</div>
<button class="row"> 6</button>
<div class="panel">
   <p>6 content</p>

</div>
<button class="row"> 7</button>
<div class="panel">
   <p>7 content</p>

</div>
<button class="row"> 8</button>
<div class="panel">
   <p>8 content</p>

</div>
<button class="row"> 9</button>
<div class="panel">
   <p>9 content</p>

</div>
<button class="row"> 10</button>
<div class="panel">
   <p>10 content</p>

</div>
<button class="row"> 11</button>
<div class="panel">
   <p>11 content</p>

</div>
<button class="row"> 12</button>
<div class="panel">
   <p>12 content</p>

</div>
<button class="row"> 13</button>
<div class="panel">
   <p>13 content</p>

</div>
<button class="row"> 14</button>
<div class="panel">
   <p>14 content</p>

</div>

最佳答案

我强烈建议在这种情况下使用CSS Flex-Box。
使用flex-box,您只需要首先创建一个包装器即可容纳所有行(在所提供的演示中为.column),然后是两行(在所提供的演示中为.verse),然后在该分区的顶部同时容纳按钮及其内容。整个结构将以以下方式显示:

<div class="column>
    <div class="verse">
        <div>
            /* your buttons and contents */
        </div>
    </div>
</div>


这是一个有效的demo-我相信它比上面的文本更好地解释了解决方案。

09-30 16:42
查看更多