Question

我有一个包含未知数量的较小div的父div，它们像大型图标按钮一样使用。如果一行子div已满，我希望它们在每一边都有相等的边距（即居中），但是如果一行未满，我希望它们从左侧填充（但仍然在列中）与上面的元素）。有没有办法用CSS做到这一点？调整窗口大小应保持居中，并根据需要添加/删除列。所有子div宽度都是已知的。

这是我正在尝试的行为的糟糕形象：

Answer 1

只需使用左侧浮动和宽度项（原始fiddle）：

<div class="container">
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
    <div class="item">Cats</div>
</div>

.container {
    overflow: auto;
}

.item {
    width: 50px;
    float: left;
    margin: 0 10px;
}

Answer 2

好的，我找到了一个解决方案，它允许相等的边距，并且ALSO对齐最后一行中剩余的div。需要注意的是，它使用隐藏元素，因此容器比它包含的可见元素高。

它还为您的代码添加了一堆额外的标记。如果我想到任何其他方式来做到这一点，我会采取不同的方式。遗憾。

JSFiddle：https://jsfiddle.net/88qadmo3/2/

#container > div {
    margin: 10px;
    width: 100px;
    height: 100px;
}
.floatleft {
    background-color: red;
}

.invis {
    visibility: hidden;
}

#container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #DDDDDD;
}

.clearfix {
    clear: both;
}

<div id="outer">
<div id="container">
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
</div>
</div>

Answer 3

您可以通过将每个子元素包装在一个元素中并使用CSS媒体查询来更改包装器的大小来完成此操作。然后，根据您希望列大小的内容，在包装器上使用％width。

运行示例时，将其缩小为＆lt; 400px，这样您就可以看到它从6列移动到3（您需要在整页上运行代码段才能看到这一点）。

＆＃13;

.parent {
  border: 2px solid red;
}
.child {
  width: 100px;
  display: block;
  margin: 0 auto;
  border: 1px solid black;
}
.wrapper {
  display: inline-block;
  text-align: center;
  float: left;
  width: 16.66%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.clear {
  clear: both;
}
@media (max-width: 800px) {
  .wrapper {
    width: 20%;
  }
}
@media (max-width: 600px) {
  .wrapper {
    width: 25%;
  }
}
@media (max-width: 400px) {
  .wrapper {
    width: 33.33%;
  }
}

＆＃13;

<div class="parent">
  <div class="wrapper">
    <div class="child">1</div>
  </div>
  <div class="wrapper">
    <div class="child">2</div>
  </div>
  <div class="wrapper">
    <div class="child">3</div>
  </div>
  <div class="wrapper">
    <div class="child">4</div>
  </div>
  <div class="wrapper">
    <div class="child">5</div>
  </div>
  <div class="wrapper">
    <div class="child">6</div>
  </div>
  <div class="clear"></div>
</div>

＆＃13;

居中对齐HTML元素，同时从左侧添加新项目

3 个答案: