javascript - 设置动态 div 的网格

Question

我目前正在尝试用我的 html 设置一个网格。我的内容存放在 Bootstrap .container 中。此内容是 div 的集合。 div 的数量因外部进程而异。如果 div 的数量是偶数，那么我想要一个 2xn 的网格。如果有奇数个 div，我也想要一个网格，但我希望最后一个 div 以其自己的 block 为中心。我已经能够使用以下代码实现此目的。

HTML

<div class="container">
    <div class="targetcontainer">
    <div class="target">
        <p>content goes here man</p>
    </div>
    <div class="target">
        <p>content goes here man</p>
    </div>
    <div class="target">
        <p>content goes here man</p>
    </div>
    <div class="target">
        <p>content goes here man</p>
    </div>
    <div class="target">
        <p>content goes here man</p>
    </div>
    </div>
</div>

CSS

.target {
  display: inline-block;
  width: 47%;
  min-width: 400px;
  height: 265px;
  margin: 10px 10px;
  padding: 2%;
  vertical-align: top;
  background: #fff;
  border: 1px solid #ebebeb;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

JS

function addClassToLastElement() {
  $('.target').each(function(index, element) {
    if ($(this).is(":last-child") && index % 2 == 0) {
      $(this).css('display', 'block')
      $(this).css('margin', '0 auto')
    }
  })
}

addClassToLastElement()

我的 jQuery 代码判断是否有奇数个元素。如果有，那么它会添加适当的属性并将最后一个 div 居中。你可以看到这个here (确保结果屏幕比较大)。

缩小屏幕时会出现问题。当有一个窗口缩小时，div 堆叠在彼此之上，这就是我想要的。问题是除了最后一个，它们不会位于屏幕中间。如果您检查最后一个 div，那就是我希望在屏幕缩小到 div 相互堆叠的程度时显示所有 div。任何人都知道如何在不使用 bootstrap 和不使用 jQuery 的 .resize() 的情况下完成此操作？我只想使用一个 Bootstrap 元素，那就是 .container

Answer 1

在父容器中添加一个text-align: center，所有的.target div现在应该居中

编辑:

/* The container itself */
.container{
    text-align: center;
}

/* every element, that is inside */
.container *{
    text-align: left;
}

编辑 2:(使用第二个容器)

https://jsfiddle.net/12wsn4pb/6/