证明父母留下的div

Question

我有以下要求。

绿色父母宽度将根据设备宽度而变化。我需要所有的盒子都在父母的中心。

我已经尝试了以下的事情，但它没有帮助我。

试用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也没有用。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

对此有任何帮助将不胜感激。

Answer 1

没有Javascript这很难使用浮动＆amp; /或内联块。

Flexbox提供了一些希望，但即使这样，也需要一些创造力。

基本上，如果已知“每行”的元素的最大数量，您可以创建所需数量的不可见元素，这些元素可以与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

使用jQuery并添加#wrapper。

使其正常工作

您所要做的就是计算一行中适合的项目数量。然后将包装器设置为适合这些项所需的精确宽度。

我希望它可以在纯CSS中完成，但据我所知，CSS没有Math.floor()等价物。

示例：

＆＃13;

＆＃13;

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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用css选择器＆＃34; nth-of-type（n）＆＃34;

    <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;
        }