将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. 你不能使用display：inline-block with float：left（你必须使用float：left或display：inline-block）

2. 如果你使用float：left，你必须在2个浮动div（总是）之后清除。

我用table-cell解决

＆＃13;
＆＃13;
* { 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;}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

使用float：

＆＃13;
＆＃13;
.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;}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;