我在一个 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 没有水平对齐。
最佳答案
我会为此使用flexbox。看看我做的这个例子:https://jsfiddle.net/cfLfLnLx/ .
也可以使用 class
而不是 className
来指定 HTML 元素的类。
关于使用 flexbox
的更详尽的指南:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
关于html - 将 div 与位置相对水平对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42242359/