html - 如何将所有内容放在一个div中并保持它们之间的距离相同

Question

我正在尝试找到一种方法，使内容更容易居中，并在屏幕变小的情况下使所有内容之间的距离相同。如果屏幕高度变小，则内容需要彼此靠近，但每个 div 之间的距离需要相同。

HTML

<div id="our_culture"class="explor_us">
      <div class="colums">
    <div class="colum1" id="pic1">
      <div class="wilpe_logo">
        <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/2000px-SVG_logo.svg.png" width="150px" height="100px" alt=""  /></a>
      </div>
      <div class="text_holder">
        <p> Wilpe is an investment group specialized in supporting and developing growing businesses and brands. Wilpe believes in knowledge.
          <div class="button_two">
            <a class="button_text" href="#">Explore</a>
          </div>
      </div>
    </div>
    <div class="colum1" id="pic1">
      <div class="wilpe_logo">
        <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/2000px-SVG_logo.svg.png" width="150px" height="100px" alt="" /></a>
      </div>
      <div class="text_holder">
        <p> Wilpe is an investment group specialized in supporting and developing growing businesses and brands. Wilpe believes in knowledge.
          <div class="button_two">
            <a class="button_text" href="#">Explore</a>
          </div>
      </div>
    </div>
    <div class="colum1" id="pic1">
      <div class="wilpe_logo">
        <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/2000px-SVG_logo.svg.png" width="150px" height="100px" alt="" /></a>
      </div>
      <div class="text_holder">
        <p> Wilpe is an investment group specialized in supporting and developing growing businesses and brands. Wilpe believes in knowledge.
          <div class="button_two">
            <a class="button_text" href="/wilpe_import.html">Explore</a>
          </div>
      </div>
    </div>
    <div class="colum2" id="pic1">
      <div class="wilpe_logo">
        <a href="wilpetrade.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/2000px-SVG_logo.svg.png" width="150px" height="100px" alt="" /></a>
      </div>
      <div class="text_holder">
        <p> Wilpe is an investment group specialized in supporting and developing growing businesses and brands. Wilpe believes in knowledge.
          <div class="button_two">
            <a class="button_text" href="/wilpetrade.html">Explore</a>
          </div>
      </div>
    </div>
    <div class="colum2"id="pic1">
      <div class="wilpe_logo">
        <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/2000px-SVG_logo.svg.png" width="150px" height="100px" alt=""  /></a>
      </div>
      <div class="text_holder">
        <p> Wilpe is an investment group specialized in supporting and developing growing businesses and brands. Wilpe believes in knowledge.
          <div class="button_two">
            <a class="button_text" href="/wilpe_deal.html">Explore</a>
          </div>
      </div>
    </div>
  </div>
      <div class="photo_overlay_filter6"></div>
</div>

CSS

.colum1{
  margin-top: -20px;
  width: 20%;
  height: 55vh;
  float: right;
}
.colum2{
  margin-top: -20px;
  width: 20%;
  height: 55vh;
  float: right;
}

.text_holder{
  color: white;
  padding: 0px;
  text-align: center;
  font-size: 16px;
  width: 80%;
  margin: auto;
  margin-top: 18%;
  z-index: 83;
  position: relative;
}
.wilpe_logo{
  width: 150px;
  height: 100px;
  margin: auto;
  margin-top: 20px;
  z-index: 83;
  position: relative;
}



#pic1{
  background-image:url(http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg);
  background-size: cover;
  background-position: center;
}

https://jsfiddle.net/u60g7v89/

Answer 1

这现在可以用 flexbox 来完成。这个问题正是 flex 模型的目的。

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.FlexBox{
  display:flex;
  width:100%;
  height:100%;
}
.FlexItem{
  width:100%;
  background:#b00;
  border:5px solid #ddd;
  flex:1;
}

<div class="FlexBox">
 <div class="FlexItem">1</div>
 <div class="FlexItem">2</div>
 <div class="FlexItem">3</div>
 <div class="FlexItem">4</div>
 <div class="FlexItem">5</div>
</div>

要调整元素之间的空间，只需将每个元素的宽度设置为您想要的值，在本例中有 5 个元素，所以我希望每个元素为 15%。 (因此总宽度小于 100%)。

然后将 flex 容器的 justify-content 属性设置为 spacce-around 或 space-between。

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.FlexBox{
  display:flex;
  width:100%;
  height:100%;
  justify-content:space-around; /*(space-between creates equal space with items left aligned)*/
}
.FlexItem{
  width:15%; /* (total items less than 100%) */
  background:#b00;
  border:5px solid #ddd;
}

<div class="FlexBox">
 <div class="FlexItem">1</div>
 <div class="FlexItem">2</div>
 <div class="FlexItem">3</div>
 <div class="FlexItem">4</div>
 <div class="FlexItem">5</div>
</div>

Support

所有主流浏览器现在都支持 Flex。

(有些设置可能有问题，但有什么新东西？请在使用前进行测试。)