我正在尝试执行砌体样式布局，但我需要它从左到右填充从上到下而不是“最佳匹配方案”它必须是顺序的。我的问题是，我无法弄清楚为什么Webkit没有打破专栏。 （在IE中未经测试）
Codepen链接：http://s.codepen.io/yoderman94/debug/RRzjrA
这是我的代码：
/*** This doesn't work in Webkit!! ***/
#flex-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
#flex-container > :nth-child(1n + 1) {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
#flex-container > :nth-child(2n + 2) {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
#flex-container > :nth-child(-n + 2) {
page-break-before: always;
/* CSS 2.1 syntax */
-webkit-column-break-before: always;
break-before: always;
/* New syntax */
}
/*** END: This doesn't work in Webkit!! ***/
.post-left {
min-height: 200px;
position: relative;
}
.post-left .text-block-holder {
position: relative;
width: 60%;
left: 0%;
}
.post-left .image-block {
position: absolute;
width: 33.33333333%;
right: 0;
}
.post-right {
min-height: 200px;
position: relative;
}
.post-right .text-block-holder {
position: relative;
width: 60%;
left: 0%;
float: right;
}
.post-right .image-block {
position: absolute;
width: 33.33333333%;
top: 0;
left: 0;
right: 0;
}
#flex-container > .post-left:nth-child(4n + 1) .text-block-holder {
width: 60%;
left: 40%;
}
#flex-container > .post-left:nth-child(4n + 1) .image-block {
width: 33.33333333%;
top: 0;
left: 0;
}
#flex-container > .post-right:nth-child(4n) .text-block-holder {
width: 60%;
left: -40%;
}
#flex-container > .post-right:nth-child(4n) .image-block {
width: 33.33333333%;
top: 0;
left: 66.66666667%;
}
.post-left {
border: solid 1px red;
}
.post-right {
border: solid 1px blue;
}
body {
padding: 50px 0px;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="flex-container" class="row">
<div class="post-left col-xs-12 col-sm-6 col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 1
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus voluptatibus quis corporis, in ea dolores, officiis odio beatae quisquam. Explicabo eaque quo consectetur delectus distinctio vero rem ad voluptas ex?</p>
</div>
</div>
<div class="post-right col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 2
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
</div>
</div>
<div class="post-left col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 3
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ne quos eos temporibus, animi.</p>
</div>
</div>
<div class="post-right col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 4
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum sint commodi eius ad iure est, maiores iusto, facere dolores odit quis distinctio modi cumque, nostrum impedit esse, fugiat? Vel.</p>
</div>
</div>
<div class="post-left col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 5
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ipsum dolor sit amet iusto id assumenda est velit harum esse unde, dolorum a tempore ratione quos eos temporibus, animi.</p>
</div>
</div>
<div class="post-right col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 6
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum sint commodi eius ad iure est, maiores iusto, facere dolores odit quis distinctio modi cumque, nostrum impedit esse, fugiat? Vel.</p>
</div>
</div>
<div class="post-left col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 7
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus voluptatibus quis corporis, in ea dolores, officiis odio beatae quisquam. Explicabo eaque quo consectetur delectus distinctio vero rem ad voluptas ex?</p>
</div>
</div>
<div class="post-right col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 8
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum sint commodi impedit esse, fugiat? Vel.</p>
</div>
</div>
<div class="post-left col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 9
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum distinctio amet quia similique consequuntur iusto id assumenda est velit ratione quos eos temporibus, animi.</p>
</div>
</div>
<div class="post-right col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 10
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum impedit esse, fugiat? Vel.</p>
</div>
</div>
<div class="post-left col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 11
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum distinctio amet quia similique consequuntur iusto id a tempore ratione quos eos temporibus, animi.</p>
</div>
</div>
<div class="post-right col-xs-12 col-sm-6">
<div class="image-block">
<img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
</div>
<div class="text-block-holder">
<h3>
Bog Post Title 12
</h3>
<p>Written by Author</p>
<p>Wednesday, 24 August 2016 07:23</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum sint commodi eius ad iure est, maiores iusto, fugiat? Vel.</p>
</div>
</div>
</div>
</div>