这是我的代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"> <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.css"> <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script> <style> #container { display:flex; flex-wrap: wrap; } </style></head><body><div id="container" ></div><script> class App { constructor() { document.addEventListener("DOMContentLoaded", () => { this.init() }) } init() { var container = document.querySelector("#container") $(container).width() function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } for (var i = 0; i < 50; i++) { let el = $(`<div/>`); el.css("background-color", getRandomColor()) el.width(Math.floor(100 + Math.random() * 100)) el.css("height", "20vh") container.appendChild(el[0]) } } } new App()</script></body></html>它的右侧有不相同的填充，但我希望它就像谷歌图像搜索页面（所有行左侧和右侧填充都是相同的），如何做
3 回答
守着星空守着你
TA贡献1799条经验 获得超8个赞
只需添加到您的项目：flex-grow:1
class App {
constructor() {
document.addEventListener("DOMContentLoaded", () => {
this.init()
})
}
init() {
var container = document.querySelector("#container")
$(container).width()
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
for (var i = 0; i < 50; i++) {
let el = $(`<div/>`);
el.css("background-color", getRandomColor())
el.width(Math.floor(100 + Math.random() * 100))
container.appendChild(el[0])
}
}
}
new App()
#container {
display: flex;
flex-wrap: wrap;
}
#container>* {
flex-grow: 1;
height:25vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<div id="container">
</div>
桃花长相依
TA贡献1860条经验 获得超8个赞
#container {
display: flex;
flex-wrap: wrap;
////////////////
justify-content: space-between;
}
胡子哥哥
TA贡献1825条经验 获得超6个赞
您必须为 div 标签的宽度设置 flex-basis：#container div{
flex-grow: 0;
flex-shrink: 1;
flex-basis: 20%
}
然后在 js 中为宽度设置 100%：
el.css("width", "100%")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<style>
#container {
display:flex;
flex-wrap: wrap;
}
#container div{
flex-grow: 0;
flex-shrink: 1;
flex-basis: 20%
}
</style>
</head>
<body>
<div id="container" >
</div>
<script>
class App {
constructor() {
document.addEventListener("DOMContentLoaded", () => {
this.init()
})
}
init() {
var container = document.querySelector("#container")
$(container).width()
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
for (var i = 0; i < 50; i++) {
let el = $(`<div/>`);
el.css("background-color", getRandomColor())
el.css("width", "100%")
el.css("height", "20vh")
container.appendChild(el[0])
}
}
}
new App()
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消