根据数量在包装器中自动分隔 div答案

【问题标题】：Space out divs automatically in wrapper based on quantity根据数量在包装器中自动分隔 div
【发布时间】：2017-11-07 05:43:36
【问题描述】：

我有一个 Bootstrap 网站，它有一个 div 包装器，然后有 1 - 6 个可能的 div。这些是 200 像素宽，需要在内部等距分布。

<div class="container">
  <div class="row">
    <div class="wasps_home_footer_blocks_container">
        <div class="wasps_home_footer_block col-md-2 ">
          <figure> <a href="#"><img src="test.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div>
        <div class="wasps_home_footer_block col-md-2 ">
          <figure> <a href="#"><img src="test.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div>
        <div class="wasps_home_footer_block col-md-2 ">
          <figure> <a href="#"><img src="test.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div>
        <div class="wasps_home_footer_block col-md-2 ">
          <figure> <a href="#"><img src="test.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div>
    </div>
  </div>

CSS：

.wasps_home_footer_blocks_container {
    width: 100%;
    margin: auto;
    margin-top: auto;
    margin-top: 20px;
}
.wasps_home_footer_block {
    width: 200px;
    text-align: center;
}

这显示了四个 div，但在 .wasps_home_footer_blocks_container div 中左对齐。 wasps_home_footer_block div 需要位于包含 div 的中间，等间距。（见附图）

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

在这种情况下，最好使用 Flexbox 而不是 Bootstrap Grid。您可以删除注释代码以查看添加的其他块。

.wasps_home_footer_blocks_container {
  display: flex;
  width: 100%;
  margin: auto;
  margin-top: auto;
  justify-content: center;
}

.wasps_home_footer_block {
  width: 200px;
  margin: 20px;
  text-align: center;
  max-height: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="wasps_home_footer_blocks_container">
      <div class="wasps_home_footer_block">
        <figure>
          <a href="#"><img src="http://www.martialartsmoviejunkie.com/wp-content/uploads/2014/08/Drunken-Master.jpg" alt="" class="img-responsive"></a>
          <figcaption>
            <h4>Test link</h4>
          </figcaption>
        </figure>
      </div>
      <div class="wasps_home_footer_block">
        <figure>
          <a href="#"><img src="https://s3.drafthouse.com/images/made/drunken-master-1_758_426_81_s_c1.jpg" alt="" class="img-responsive"></a>
          <figcaption>
            <h4>Test link</h4>
          </figcaption>
        </figure>
      </div>
      <div class="wasps_home_footer_block">
        <figure>
          <a href="#"><img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive"></a>
          <figcaption>
            <h4>Test link</h4>
          </figcaption>
        </figure>
      </div>

      <!--UNCOMMENT ME-->
      <!--       <div class="wasps_home_footer_block">
          <figure> <a href="#"><img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div>
      <div class="wasps_home_footer_block">
          <figure> <a href="#"><img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div> -->
      <div class="wasps_home_footer_block">
        <figure>
          <a href="#"><img src="http://media1.break.com/dnet/media/450/925/2925450/7-martial-arts-movies-you-need-to-see-image-7.jpg" alt="" class="img-responsive"></a>
          <figcaption>
            <h4>Test link</h4>
          </figcaption>
        </figure>
      </div>
    </div>
  </div>

【讨论】：