将 div 与相对水平位置对齐

Question

我在一个div里面有3个div，我希望这3个div水平对齐。我能够通过给出绝对位置来做到这一点，但我希望他们有相对位置。为什么我希望它有相对位置，如果我缩小或放大，div 大小不会改变，但这些div 中的元素会改变。我也希望div 缩小/缩小。这就是为什么我希望他们有相对的位置。

.body_clr {
  background-color: #eceff1;
  position: fixed;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.test_div {
  width: 20em;
  height: 20em;
  margin-left: 2em;
  margin-top: 20%;
  position: relative;
  background-color: #f5f5f5;
  display: inline-block;
  float: left;
  z-index: 1;
}
.ff {
  width: 40em;
  height: 100%;
  padding-top: 10%;
  position: relative;
  background-color: #2aabd2;
  float: left;
  margin-left: 20%;
  margin-right: 20%;
  display: inline-block;
}
.overview {
  width: 20em;
  height: 35%;
  background-color: black;
  margin-top: 20%;
  float: left;
  margin-right: 5%;
  position: relative;
  display: inline-block;
  z-index: 1;
}

<div className="body_clr">
  <div className="test_div"></div>
  <div className="ff"></div>
  <div className="overview"></div>
</div>

现在我的div 没有水平对齐。

Answer 1

我会为此使用flexbox。看看我举的这个例子：https://jsfiddle.net/cfLfLnLx/。

还可以使用 class 而不是 className 来指定 HTML 元素的类。

更广泛的使用flexbox指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

你的 css 中有一些错误：

您不能使用带有浮点数：左的显示：内联块

1. (您必须使用浮点数：左或显示：内联块(

2. 如果你使用浮点：左，你必须在2个浮点div之后放一个清除(总是(。

我用表格单元格解决

* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.body_clr { width: 100%; height: 100%; display: table; }
.col1 { height: 100%; display: table-cell; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.ff { width: 100%; height: 40px; display: block; background: #000;}
.test_div { width: 100%; height: 40px; display: block; background: red;}
.overview { width: 100%; height: 40px; display: block; background: blue;}

<div class="body_clr">
  <div class=" col1">
    <div class="test_div"></div>
  </div>
  <div class="col1">
    <div class="ff"></div>
  </div>
  <div class="col1">
    <div class="overview"></div>
  </div>
</div>

带浮点数：

.body_clr { width: 100%; height: 100%; display: block; }
.clear { width: 0; height: 0; padding: 0; margin: 0; display: block; visibility: hidden; overflow: hidden; font-size: 0; line-height: 0; clear: both; }
.col1 { width: 33.33%; height: 100%; display: block; float: left; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.ff { width: 100%; height: 40px; display: block; background: #000;}
.test_div { width: 100%; height: 40px; display: block; background: red;}
.overview { width: 100%; height: 40px; display: block; background: blue;}

<div class="body_clr">
  <div class=" col1">
    <div class="test_div"></div>
  </div>
  <div class="col1">
    <div class="ff"></div>
  </div>
  <div class="col1">
    <div class="overview"></div>
  </div>
  
  <div class="clear"></div>
</div>