我有一个包含 4 个或更多元素的单杠。我想做的是,当浏览器调整水平栏的每个元素及其各自元素的大小时,我正在使用 twitter-bootstrap 4,但默认情况下它似乎也不起作用
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
.flex7-child-1 {
height: 40%;
position: relative;
}
.flex7-child-1:before {
content: '';
position: absolute;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
background-size: contain;
top: -60px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-2:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 88px;
left: -170px;
right: 0;
margin: 24px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-3:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-4:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 170px;
right: 0;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-5:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 58px;
left: 166px;
right: -174px;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
<div class="post-content-wrapper">
<div class="flex flex7">
<div class="child flex7-child flex7-child-1"></div>
<div class="child flex7-child flex7-child-2"></div>
<div class="child flex7-child flex7-child-3"></div>
<div class="child flex7-child flex7-child-4"></div>
<div class="child flex7-child flex7-child-5"></div>
</div>
</div>
切换前
切换后,即使在不破坏元素的情况下调整布局大小时,我也希望拥有相同的位置
最佳答案
这里有一个更好的方法来为您的单杠实现响应一致的样式。请注意,每个 .flex7-child-#:before
的单独样式已被删除,所有 .flex7-child
元素现在都使用 flexbox。
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
/* Pay attention to below */
.flex7-child {
display: flex;
flex-direction: row;
justify-content: center;
}
.flex7-child:before {
content: '';
position: relative;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
top: -70px;
background-size: contain;
display: block;
width: 50px;
height: 50px;
}
/* Pay attention to above */
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-1 {
height: 40%;
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
关于html - 如何将水平条转换为响应式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59400408/