Jquery在固定宽度的容器中插入块

Question

我知道这是相当旧的风格，我试图实现这个见照片

我试过使用这个。

Jquery

var i = 0;
var appendDiv = setInterval(function(){
if (i === 7) {
clearInterval(appendDiv);
} else (
$(".output").append("<div class='box'style='width:10%;'></div>")
)
i++
}, 1000)`

https://jsfiddle.net/hp3Lj9da/

任何帮助将不胜感激!

TIA

Answer 1

你可以通过CSS使用flex:

var i = 0;
var appendDiv = setInterval(function(){ 
if (i === 7) {
clearInterval(appendDiv);
} else (
$(".output").append("<div class='box'></div>")
)
i++
}, 1000)

.box {
background: red;
height: 2rem;
width: 100%;
margin: 2px;
}
.output {
display: flex;
justify-content: space-around;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="output"></div>

Answer 2

您需要从.box中移除固定宽度并给出flex: 1。output也用display: flex

var i = 0;
var appendDiv = setInterval(function () {
if (i === 7) {
clearInterval(appendDiv);
} else $(".output").append("<div class='box'></div>");
i++;
}, 1000);

.box:hover{background:red;
}
.output{
display: flex;
}
.box{
display:inline-block;
height:100px;
background:blue;
flex: 1;
margin:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="output">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

Answer 3

使用Flexbox来定位divs。

您可以使用:hover伪类实现悬停效果。

var i = 0;
var appendDiv = setInterval(function() {
if (i === 7) {
clearInterval(appendDiv);
} else {
$(".container").append("<div></div>");
}
i++
}, 1000);

.container {
display: flex;
height: 100px;
width: 500px;
}
.container div {
background-color: #0B2CFF;
flex-grow: 1;
margin: 10px;
}
.container div:hover {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
</div>h