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

图片1:一个元素
html - 如何使div沿着将根据用户输入添加的动态元素 float 到容器的中心-LMLPHP

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

图片2:两个元素
html - 如何使div沿着将根据用户输入添加的动态元素 float 到容器的中心-LMLPHP

用户选择了两个元素,因此它们两个都彼此浮动,并浮动到容器div的中心。

图片3:四个要素
html - 如何使div沿着将根据用户输入添加的动态元素 float 到容器的中心-LMLPHP

用户选择了四个元素,因此第一面已满,容器div的100%由四个25%的盒子填充。

图片4:五个要素
html - 如何使div沿着将根据用户输入添加的动态元素 float 到容器的中心-LMLPHP

如果用户选择5个元素,则第5个元素应浮动到容器div的中心,紧靠其他4个框的第一行。

6盒装:
html - 如何使div沿着将根据用户输入添加的动态元素 float 到容器的中心-LMLPHP

七盒!
html - 如何使div沿着将根据用户输入添加的动态元素 float 到容器的中心-LMLPHP

因此,最后,我将添加一些asp.net vb,它将根据存储在SQL数据库中的一些数据将所需的框带入转发器控件,并将所需的控件带入存储过程。

我一直在尝试不同的技术,但没有一个解决了我的问题(利润率:0自动;显示:内联代码块;等...)

任何帮助将不胜感激!

谢谢

最佳答案

这是一个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将始终居中。



请注意,所有主要的浏览器except IE 8 & 9都支持flexbox。某些最新的浏览器版本(例如Safari 8和IE10)需要vendor prefixes。为了快速添加所需的所有前缀,请在左侧面板中的Autoprefixer中发布CSS。

10-07 19:37
查看更多