如何实现左右固定,中间自适应布局
Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 308 (opens in a new tab)
Author 回答者: shfshanyue (opens in a new tab)
可以参考 【Q017】css 如何实现左侧固定300px,右侧自适应的布局 (opens in a new tab)
.container
.left
.main
.right
.container {
display: flex;
}
.left {
flex-basis: 300px;
flex-shrink: 0;
}
.right {
flex-basis: 300px;
flex-shrink: 0;
}
.main {
flex-grow: 1;
}
Author 回答者: Innocentw (opens in a new tab)
.box {
display: flex
}
.left,.right {
width: 300px
}
.center {
flex: 1
}
Author 回答者: linlai163 (opens in a new tab)
以前还要用圣杯和双飞翼,现在都直接 flex 了。
Author 回答者: Lonely-bear (opens in a new tab)
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<style>
/* grid布局 */
.container {
height: 20rem;
margin: 2rem;
background-color: #eeeeee;
display: grid;
grid-template-columns: 300px 1fr 300px;
}
.left {
height: 100%;
border: 1px solid black;
}
.main {
height: 100%;
}
.right {
height: 100%;
border: 1px solid;
}
</style>
Author 回答者: YanCoeder1 (opens in a new tab)
楼上应该去掉height