柔性盒布局，调整块的高度
柔性盒布局，调整块的高度
提问于 2018-04-01 12:57:03
如何调整.half-containers1和.half-containers2的高度？
得到我在图像中标记的三角形最好的方法是什么？是否可以只使用css？还是我必须用图像？
这是我的小提琴和我想要做的布局图像
html,
body {
margin: 0;
height: 100%;
}
div {
box-sizing: border-box;
border: 0.5px solid red;
}
.main-container {
height: 100%;
display: flex;
}
.left-container {
flex: 1 1 0;
}
.center-container {
flex: 1 1 0;
display: flex;
flex-direction: column;
}
.right-container {
flex: 1 1 0;
display: flex;
flex-direction: column;
}
.half-containers1 {
flex: 1;
height: 400px;
}
.half-containers2 {
flex: 1;
height:100px;
background-image: url("https://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png")
}<div class="main-container">
<div class="left-container">Left container</div>
<div class="center-container">
<div class="half-containers1">
<p>Center</p>
</div>
<div class="half-containers2">Center2</div>
</div>
<div class="right-container">
Right container
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-04-01 13:15:44
使用flex-basis (flex: 0 X速记)在您的halfcontainers和使用::after做三角
html,
body {
margin: 0;
height: 100%;
}
div {
box-sizing: border-box;
border: 1px solid red;
}
.main-container {
height: 100%;
display: flex;
}
.left-container {
flex: 1;
}
.center-container, .right-container {
flex: 1;
display: flex;
flex-direction: column;
}
.half-containers1 {
flex: 0 70% /*400px*/;
position: relative;
}
.half-containers1::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 10px white;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
.half-containers2 {
flex: 0 30%/*100px*/;
background: url("https://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png") no-repeat center / cover
}<div class="main-container">
<div class="left-container">Left container</div>
<div class="center-container">
<div class="half-containers1">
<p>Center</p>
</div>
<div class="half-containers2">Center2</div>
</div>
<div class="right-container">
Right container
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49598286
复制相关文章
相似问题
腾讯云开发者
