我正在尝试堆叠这些元素,使它们彼此叠加,但它们最终会水平压扁。我做错了什么?
HTML:
.content-wrapper {
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
display: flex;
align-items: center;
justify-content: center;
}
.content-box {
background-color: #f2f2f2;
padding: 5vh 5vw;
font-family: "Roboto";
color: #676767;
text-align: center;
max-width: 60vw;
position: relative;
z-index:10;
margin: 1vh
}
<div class="content-wrapper">
<div class="content-box">
<span class="title"> Stats </span>
<br>
<div class="sep"></div>
<p> Lorem ipsum 1 </p>
</div>
<div class="content-box">
<span class="title"> Stats </span>
<br>
<div class="sep"></div>
<p> Lorem ipsum 2 </p>
</div>
</div>
答案 0 :(得分:0)
使用弹性框代替。 flex direction
.box-list {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
flex: 0 0 auto;
width: 50px;
height: 50px;
background-color: #ccc;
margin-bottom: 10px;
}
&#13;
<section class="box-list">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</section>
&#13;
答案 1 :(得分:0)
将flex-direction: column;
添加到包装器中:
.content-wrapper {
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content-box {
background-color: #f2f2f2;
padding: 5vh 5vw;
font-family: "Roboto";
color: #676767;
text-align: center;
max-width: 60vw;
position: relative;
z-index:10;
margin: 1vh
}
&#13;
<div class="content-wrapper">
<div class="content-box">
<span class="title"> Stats </span>
<br>
<div class="sep"></div>
<p> Lorem ipsum 1 </p>
</div>
<div class="content-box">
<span class="title"> Stats </span>
<br>
<div class="sep"></div>
<p> Lorem ipsum 2 </p>
</div>
</div>
&#13;