CSS引导程序。固定和Fluid div,流体内部含量似乎偏移

时间:2018-11-10 17:14:23

标签: html css

我正在尝试创建我认为是基本模板的东西。我有一个固定宽度的边栏,并且绝对位于左侧。然后,我旁边有一个100%宽度的div绝对位置。

当我将内容放在右侧边栏中并添加margin: 0 auto时,它似乎向右对齐。

它是这样的:

enter image description here

这是我的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>

有人可以看到问题吗?

顺便说一句,我是菜鸟。如果有另一种/最佳实践的方法来实现固定的侧边栏和流畅的右侧,请告诉我。

1 个答案:

答案 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>