Question

我尝试将子div放在父div的中心。子div的数量是动态的，并且使“ float：left”。但是，一组子div不能在父div内居中。父级div静态宽度：800px；子div静态宽度：360像素；高度：320像素。

这是我的代码：

* {
  box-sizing: border-box;
}

.parent {
  width: 800px;
  display: flex;
  justify-content: center;
  background-color: #f8f9fb;
}

.child {
  width: 360px;
  margin: 7px;
  min-width: 360px;
  height: 320px;
  float: left;
  background-color: #FFFF;
  border: 1px solid;
}

<div class="parent">
  <div class="content">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

我以某种方式引用了我的情况，但没有引用：
-http://jsfiddle.net/h9H8w/12/
-https://dev.to/stel/a-little-trick-to-left-align-items-in-last-row-with-flexbox-230l
-https://codepen.io/anon/pen/JbpPKa

我的结果是这样的：
-https://imgur.com/TX9I4vq
-https://imgur.com/NiRaHgj

感谢阅读，对不起我的英语不好。

================================================ =========

在@kukkuz的帮助下。我更改了代码：

 * {
        box-sizing: border-box;
    }
    .parent {
        max-width: 800px; 
        display: grid;
        justify-content: center;
        background-color: #f8f9fb;          
        grid-template-columns: repeat( auto-fit, 360px);
        grid-gap: 7px;
    }

.child {
    width: 360px;
    /*margin: 7px;*/
    min-width: 360px;
    height: 320px;
    /*  float: left;*/
    background-color: #FFFF;
    border: 1px solid;
}


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

Answer 1

这就是你想要的，基本上，我删除了float:left和content div

justify-content: center;将处理框的居中位置，

取消注释flex-wrap:wrap;，将子级换行到下一行

知道，制作一个div display:flex，将使其子项变为弹性项，这在您的情况下不会发生

* {
  box-sizing: border-box;
}

.parent {
  width: 800px;
  display: flex;
  justify-content: center;
  background-color: #f8f9fb;
  /*flex-wrap:wrap;*/
}

.child {
  width: 36px;
  margin: 7px;
  min-width: 36px;
  height: 32px;
  background-color: #FFFF;
  border: 1px solid;
}

<div class="parent">

  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>


</div>

当“ float：left”时如何修复父中心的div子？

1 个答案: