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