我正在尝试创建我认为是基本模板的东西。我有一个固定宽度的边栏,并且绝对位于左侧。然后,我旁边有一个100%宽度的div绝对位置。
当我将内容放在右侧边栏中并添加margin: 0 auto
时,它似乎向右对齐。
它是这样的:
这是我的css / html:
/* Structure */
#left,
#right {
position: absolute;
top: 0;
min-height: 100%;
}
#left {
left: 0;
width: 250px;
background-color: red;
}
#right {
left: 250px;
width: 100%;
background-color: blue;
}
main.container-fluid {
max-width: 960px;
background-color: yellow;
margin: 0 auto;
}
<div id="left">
</div>
<div id="right">
<main class="container-fluid">
<div class="row">
<div class="col">
aaaaaa
</div>
</div>
</main>
</div>
有人可以看到问题吗?
顺便说一句,我是菜鸟。如果有另一种/最佳实践的方法来实现固定的侧边栏和流畅的右侧,请告诉我。
答案 0 :(得分:0)
您可能要考虑采用这种方法。
无需使用绝对定位,只需将.sidebar
和.main
放在flex容器中即可。
给.sidebar
设置250px的flex-basis,给.main
设置auto的flex-basis。两者都可以缩小,但是只有.main
可以增长。
然后在.main
内添加引导程序.container-fluid
,并在需要的地方开始使用.row
和.col
。
.flex-container {
display: flex;
}
.sidebar {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 200px;
}
.main {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.bg--red {
background: red;
}
.bg--blue {
color: white;
background: blue;
}
.bg--yellow {
background: yellow;
color: black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-container">
<div class="sidebar bg--red">
<h2>sidebar content</h2>
</div>
<div class="main bg--blue">
<h1>main content</h1>
<div class="container-fluid">
<div class="row">
<div class="col bg--yellow">col 1 / 3</div>
<div class="col bg--yellow">col 2 / 3</div>
<div class="col bg--yellow">col 3 / 3</div>
</div>
</div>
</div>
</div>