当前位置: 动力学知识库 > 问答 > 编程问答 >

css - dynamically created bootstrap columns with different heights, float to left

问题描述:

Consider an unknown number of divs being created dynamically and styled using the bootstrap grid system. In this example, I'm using col-sm-4 so after every third block, we move to a new row. The blocks (divs) can be different heights, which is determined by the content within.

This is where I run into the layout problem. When moving to a new row, I want the fourth block to float to the left. This only happens when the left most div in the row above is also the shortest. I have pictures to illustrate.

Real Life:

The Dream:

The "correct" way to do this would be to wrap every three in a row class I beleive, but I'm not sure how to do this with dynamic content (could probably hack it) or if there's an easy css solution.

HTML:

<div class="row">

<div class="col-sm-12">

<div class="col-sm-4 block">

<div class="inner-block"></div>

</div>

<div class="col-sm-4 block">

<div class="inner-block"></div>

</div>

<div class="col-sm-4 block">

<div class="inner-block" style="height:150px"></div>

</div>

<div class="col-sm-4 block">

<div class="inner-block"></div>

</div>

</div>

</div>

CSS:

.block {

padding: 5px;

}

.inner-block {

height: 200px;

background-color: blue;

}

Plunker Example (expand preview to proper size)

网友答案:

If your system is unable to add first/last classes on every nth div, then you can use the nth-child css pseudo selector.

@media (min-width: 768px) {// For medium displays and above
  .col-sm-4:nth-child(3n+1) { // We target every 3rd div but offset the count by 1 so that that 1st, 4th 7th etc divs are cleared
    clear:both; // Clear the float
  }
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: