标签 javascript html css
<分区>
我想不出构建这段 html/css 的好方法。
假设我有一个居中 + 中间 80% 高度 + 宽度的区域，这意味着它会随浏览器调整大小。
现在，我有一个由 javascript 动态附加到该区域的 div 标签列表。当 div 标签到达一行的末尾时，它会切换到下一行。
像这样:
___________________________
| [AB] [CD] [EF] [GH] [IJ] |
| [KL] [MN] [OP] [QR] [ST] |
| [UV] [WX] [YZ] |
|__________________________|
我有 100 个这样的 div block ，当浏览器改变大小时，它们可能会移动并一起改变行。请建议使用 html/css 实现此布局的有效方法。感谢您的帮助。
最佳答案
您可以使 div float 在您的容器内，它可以绝对定位/固定指定尺寸:
document.querySelector('.container').addEventListener('click', function() {
this.insertAdjacentHTML('beforeend', '<div class="block">Block' + (this.children.length + 1) + '</div>');
});.container {
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: #EEE;
overflow: auto;
}
.container .block {
height: 50px;
width: 100px;
background: coral;
float: left;
}
.container .block:nth-child(odd) {background: darkseagreen;}<div class="container">
<div class="block">Block 1</div>
<div class="block">Block 2</div>
<div class="block">Block 3</div>
<div class="block">Block 4</div>
<div class="block">Block 5</div>
</div>关于javascript - 附加 div block 并自动更改行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32502803/