我正在创建一个1：1正方形的网格.用户可以继续添加正方形,我希望正方形的大小保持其长宽比,但要相应地调整大小.棘手的部分是我希望正方形在页面上始终可见-也就是说,没有滚动,并且网页将响应宽度和高度.
我创建了一个示例,在测试此示例时每秒添加一个正方形.但是,我无法使其与高度部分一起使用.我已经能够使用宽度了.
@H_301_8@setInterval(() => { // console.log(document.getElementsByClassName('square-container')[0]); document.getElementsByClassName('square-container')[0].innerHTML += ("<div class='square'></div>"); },1000);
@H_301_8@.square-container { display: flex; flex-wrap: wrap; } .square { position: relative; flex-basis: calc(33.333% - 10px); margin: 5px; Box-sizing: border-Box; background: red; transition: background 1s; } .square::before { content: ""; display: block; padding-top: 100%; }
@H_301_8@<div class="square-container"> <div class="square"></div> </div>
我没有使用引导程序之类的任何ui库,而仅使用了html,css和javascript.
最佳答案
使用Float而不是wrap.设置方形容器显示块.
@H_301_8@<div> <div id="square-container"> <div id="square"></div> <div id="square"></div> <div id="square"></div> <div id="square"></div> <div id="square"></div> <div id="square"></div> <div id="square"></div> <div id="square"></div> </div> </div> #square-container{ display: block } #square{ float: left; height: 100px; width: 100px; background-color: orangered; margin: 1px; }
