这是我的代码:

 .containerMaster { border: 2px solid darkgray; width: auto; height: 310px; } .containerSlave { width: auto; height: auto; display: inline-block; padding: 2px 2px 2px 2px; margin: 2px 2px 2px 2px; border: 1px solid #000000; background-color: aquamarine; } .ball { width: 30px; height: 30px; border-radius: 50%; line-height: 30px; text-align: center; text-shadow: 0 1px 1px #000; font-size: 15px; color: #ffffff; margin: 3px 3px 3px 3px; background: radial-gradient(circle at 20px 15px, #7FBBFC, #000); } 
 <div class="containerMaster"> <div class="containerSlave"> <div class="ball">01</div> <div class="ball">02</div> <div class="ball">03</div> <div class="ball">04</div> <div class="ball">05</div> <div class="ball">06</div> <div class="ball">07</div> <div class="ball">08</div> <div class="ball">09</div> <div class="ball">10</div> <div class="ball">11</div> <div class="ball">12</div> </div> </div> 

但我希望可以做到这一点:

01 11

02 12

03 13

04

05

06

07

08

09

10

#1楼 票数:0 已采纳

演示: http : //jsfiddle.net/q79ed1ue/

.containerSlave {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px; /*item height x 10*/
}
.containerSlave .ball {
    height: 20px;
    padding: 5px;
    box-sizing: border-box;
}

请务必查看http://caniuse.com/#feat=flexbox

  ask by MOMO translate from so

未解决问题?本站智能推荐:

4回复

如何将图像保持在页面的50%并包含其高度

我有一个容器,容器中有两个部分,两个部分的宽度均为50%。 在右侧容器中是图像。 我希望左右框始终保持相同的高度,并且图像始终始终保持50%的宽度。 我无法弄清楚如何始终将图像保持在容器的整个高度和宽度上,而又不会完全使图像看起来糟透了。 即使图像的某些部分被切掉,也可以。 我该怎
2回复

如何将元素保持在同一水平线上?

我正在尝试使文本和链接保持在同一行。 我认为htis CSS可以解决问题 在以下HTML上 但是用HTML显然没有那么容易。 这是小提琴-https: //jsfiddle.net/92rv0Lpa/ 。 如何将所有内容保持在同一水平线上?
2回复

如何将文本上方的文本保持在任何宽度的正中心

嗨,我正在尝试将文本保持在圆形图像的中心,我尝试使用以下代码将其设置为中心,但是当我调整窗口大小或将视图更改为ipad时,iphone会向左移动,我们可以管理此文本的确切中心任何屏幕宽度? 这是我的代码 我为此尝试的CSS是 我想在任何屏幕的中心都保留图像上方的文本,而不用编写自定义代
3回复

即使在页面滚动时如何将标题保持在固定位置

我正在尝试创建一个标题,该标题保持在顶部,但是当我向下滚动页面时,标题随之移动,同时保持其位置。 我的要求是,当我们向下滚动时,标题不应随页面一起移动。 注意 :这只是我的布局的伪代码,我添加了随机文本以使代码正常工作 注意 :我尝试使用position:absolute作为标题,但问
3回复

如何将居中的图像保持在两者之间的

我有以下设计,其中我在两个<div>之间有一个图像。 我的目标是保持两个div之间的图像。 在这个例子中,我希望主图像( #firstLayer )位于绿色图像( #firstLayer )和灰色(身体背景)之间。 我的解决方案在Firefox 16,safari和Chrom
7回复

需要将图像(水平/垂直)保持在固定的高度div中

我正在关注我之前的问题,它有两个盒子,有两个图像(可以是垂直或水平) ,问题是盒子的高度是固定的,当我在某些屏幕尺寸中更改窗口屏幕时,图像绕过了边框框。 我检查了这些问题1和2的答案,但没有多大帮助。 DEMO CSS HTML
1回复

通过打开/隐藏元素时将页脚保持在同一位置来垂直扩展DIV

我有一个div,通过单击一个按钮来显示/隐藏,如下图所示。 在这里,当按下按钮时,我希望按钮位于相同位置,并展开其上方的div(内容)(朝顶部-位置1而不是底部-位置2)。 我尝试了以下position:absolute; 属性,但没有任何变化。 任何想法? 这是仅用于指示此布局的示
1回复

调整浏览器大小时如何将元素保持在相同位置?

我有以下html: CCS是: 但是,当我调整浏览器窗口的大小时,“快退” div移到右侧。 我如何防止这种行为? 谢谢!