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。

（有些设置可能有问题，但有什么新内容？只需在使用前进行测试。）

Answer 2

您可以使用溢出滚动选项并隐藏滚动条我认为这可能会解决您的问题。您可以使用的代码是：

.text_holder{
      overflow: scroll;
      overflow:hidden;
    }

要添加这两个参数。根据我的理解，这可以解决您的问题。

如何将div中的所有内容居中并保持它们之间的距离相同

2 个答案:

Support