Question

我有一个作为容器的div。我需要用其他div填充此容器，但项目数正在更改。可能是3或4，甚至其他。

高度无关紧要，宽度都相同。

我使用了display: block和float: left-可以用，但是有空白空间。我想强制这些项目覆盖剩余空间。

Answer 1

Flexbox可让您按照所需的方式自动调整元素的大小。

Flexbox需要做两件事：

父容器（例如DIV，剖面，侧面，p等）
一个或多个子元素（例如div，p，img等）

演示：

$('#adddiv').click(function(){
  $('#container').append('<div />');
});

$('#remdiv').click(function(){
  $('#container>div:last').remove();
});

#container{display:flex;}
#container>div{flex:1;width:50px;height:50px;}

#container div:nth-child(1){background:green;}
#container div:nth-child(2){background:pink;}
#container div:nth-child(3){background:lightblue;}
#container div:nth-child(4){background:red;}
#container div:nth-child(5){background:palegreen;}
#container div:nth-child(6){background:yellow;}
#container div:nth-child(7){background:orange;}
#container div:nth-child(8){background:purple;}
#container div:nth-child(9){background:beige;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="container"><div></div></div>
<button id="adddiv">Add a Div</button>
<button id="remdiv">Remove a Div</button>

Here is a very, very good (5min) video tutorial

Here is a great cheatsheet

DIV包含不同数量的div，填充和覆盖剩余空间

1 个答案:

演示：