Question

我目前正在尝试使用html设置网格。我的内容在引导程序.container中得到了解决。这个内容是div的集合。 div的数量因外部过程而异。如果有偶数个div，那么我想要一个2xn网格。如果有一个奇数个div我也想要一个网格，但我希望最后一个div在它自己的块中居中。我已经能够通过以下代码实现这一目标。

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。任何人都知道如何在没有引导程序的情况下完成此任务并且不使用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/

Answer 2

另一个选择 - 如果您正在进行此响应 - 将使用媒体查询。如果窗口的宽度小于820px，则将边距应用于目标。

@media screen and (max-width: 820px) {
    .target {
        display: block;
        margin: 0px auto;
    }
}

设置动态div的网格

2 个答案: