对齐留在 parent 中的 div

Question

我有以下需求。

绿色 parent 宽度会因设备宽度而异。我需要所有框都位于 parent.

的中心

我已经尝试过以下方法，但对我没有帮助。

试用 1
Parent {text-align:center} box {display:inline-block}。

这导致了以下输出

试用 2
Parent {text-align:center} box{float:left}。

这导致了以下输出

试用 3
Parent {display:flex} box -> justify-around & justify-between 也没有用。

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

没有 Javascript 这很难使用浮点数和/或内联块。

Flexbox 提供了一些希望，但即便如此，仍需要一些 创造力。

基本上，如果元素的最大数量 "per row" 已知，您可以创建所需数量的不可见元素，这些元素可以与 justify-content:center 结合使用，以实现您需要的最后一行外观本质上是将最后一行内容推回左侧。

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  text-align: center;
  border: 1px solid grey;
  width: 80%;
  max-width: 800px;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;
}
.balancer {
  height: 0;
  width: 100px;
  margin: 0 10px;
  visibility: hidden;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>

</div>

Answer 2

您可以使用 css 选择器 "nth-of-type(n)"

    <div class="parent">
<div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

和css这里

.parent
    {
        display: block;
        width: 980px;
        padding: 10px 50px;
        background: green;
        box-sizing: border-box;
    }

        .parent::after
        {
            content: '';
            display: block;
            clear: both;
        }

    .item
    {
        float: left;
        width: 24%;
        margin-right: 1.25%;
        margin-bottom: 1.25%;
        /*
            note
            you may need min height , height or overflow:hidden

            */
    }

        .item:nth-of-type(4n)
        {
            float: right;
            margin-right: 0;
        }

Answer 3

通过使用 jQuery 并添加 #wrapper.

使其正常工作

您所要做的就是计算一行可以容纳多少个项目。然后将包装器设置为适合这些项目所需的确切宽度。

我希望它可以在纯 CSS 中完成，但据我所知，CSS.

没有 Math.floor() 等价物

示例：

function fitItemsOnRow() {
  var windowWidth = $(window).width();
  var itemWidth = $(".item").outerWidth(true);
  var itemAmount = Math.floor((windowWidth / itemWidth));
  
  if(itemAmount > $(".item").length) {
    /* Set the maximum amount of items */
    itemAmount = $(".item").length;
  }
  
  var rowWidth = itemWidth * itemAmount;
  $("#wrapper").width(rowWidth);
}

$(window).resize(function() {
  /* Responsive */
  fitItemsOnRow();
});

$(document).ready(function() {
  fitItemsOnRow();
});

body {
  margin: 0px;
}
#parent {
  background: #75DB3C;
  min-width: 100vw; 
  min-height: 100vh;
  text-align: center;
}
#wrapper {
  display: inline-block;
  text-align: left;
  font-size: 0px; /* Removes default margin */
}
.item {
  display: inline-block;
  margin: 12px;
  width: 100px;
  height: 100px;
  background: #0B56A9;
}

<div id="parent">
  <div id="wrapper">
    <!-- A wrapper is necessary to center the items -->
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

对齐留在 parent 中的 div

Justify divs left in parent

html

css

display