如何使 div 沿着根据用户输入添加的动态元素浮动到容器的中心

Question

我正在尝试使 div 浮动到其容器 div 的中心，但问题是用户可能决定添加 1 到 12 个元素，因此他们必须以 4 行为单位浮动。因此，如果用户只添加一个元素，它应该浮动到容器的中心，如果 he/she 添加两个，它们必须浮动到容器的中心但彼此相邻.如果用户添加 5 个元素，前四个必须并排浮动（填充容器的 100% 宽度），第五个应该在第二行的中心。此图像显示了我想要实现的目标：

图 1：一个元素

用户输入：只有一个框浮动到中心。

图 2：两个元素

用户选择了两个元素，因此它们都漂浮在彼此的一侧并漂浮在容器的中心 div。

图 3：四个元素

用户选择了四个元素，所以第一面是满的，100% 的容器 div 被四个盒子填满，每个盒子占 25%。

图 4：五个元素

如果用户选择 5 个元素，第五个元素应浮动到容器的中心 div，就在其他 4 个框的第一行下方。

6盒:

七盒！

所以，最后，我将添加一些 asp.net vb，根据存储在 SQL 中的一些数据，将所需的框带到转发器控件数据库，并通过存储过程带来所需的控件。

我一直在尝试不同的技术，但是 none 解决了我的问题（边距：0 auto；显示：inline-block；等等...）

任何帮助将不胜感激！！

谢谢

Answer 1

这是一个 flexbox 解决方案：

HTML

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box4"><span>4</span></div>
    <div class="box box5"><span>5</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box9"><span>9</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
    <div class="box box12"><span>12</span></div>
</div>

CSS

html { height: 100%; }

body {     
    height: 100%;
    background-color: yellow;    
    }

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 400px;
    height: 100%;
    margin: auto;
}

.box {
    height: 50px;
    width: 75px;
    margin: 10px;
    background-color: lightgreen;
    border: 1px solid #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

DEMO

在演示中，尝试删除任意数量的 div。剩余的 div 将始终居中。

请注意，所有主要浏览器都支持 flexbox，except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer。

如何使 div 沿着根据用户输入添加的动态元素浮动到容器的中心

How to make a div float to a center of a container, along dynamic elements that will be added according to user's input

html

css

vb.net

css-float