我正在创建一个1：1正方形的网格.用户可以继续添加正方形,我希望正方形的大小保持其长宽比,但要相应地调整大小.棘手的部分是我希望正方形在页面上始终可见-也就是说,没有滚动,并且网页将响应宽度和高度.
我创建了一个示例,在测试此示例时每秒添加一个正方形.但是,我无法使其与高度部分一起使用.我已经能够使用宽度了.
setInterval(() => {
// console.log(document.getElementsByClassName('square-container')[0]);
document.getElementsByClassName('square-container')[0].innerHTML += ("<div class='square'></div>");
},1000);.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%;
}<div class="square-container">
<div class="square"></div>
</div>我没有使用引导程序之类的任何ui库,而仅使用了html,css和javascript.
最佳答案
使用Float而不是wrap.设置方形容器显示块.
<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;
}