当父级是浮动时：左边并且孩子是固定的，如何设置位置？

Question

我想改变上面的图片，如下所示。

请参阅以下代码。

我想知道如何解决这个问题而不用填充左边距，左边距离＆＃39;

＆＃13;

＆＃13;

.nav-wrap {
  position: relative;
  overflow: hidden;
  top: -2px;
  width: 33.33333333333333%;
  float: left;
}

.sidebar-nav {
  position: fixed;
  width: 380px;
  padding-top: 95px;
  padding-bottom: 95px;
  padding-left: 20px;
  padding-right: 20px;
  height: 100%;
  float: left;
  clear: both;
  overflow-y: hidden;
  display: block;
  background: transparent;
  background: rgba(0, 0, 0, 0.28);
  z-index: 10;
}

.content-wrap {
  width: 66.66666666666666%;
  background: #fff;
  float: left;
  height: 100%;
  position: relative;
  padding: 45px 50px;
  overflow: hidden;
}

＆＃13;

<div class="nav-wrap">
  <div class="sidebar-nav">
  </div>
</div>

<div class="content-wrap">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用this - 我已经为你创建了一个没有bootstrap的准系统。你可以从这里开始。

  <ul id="mainWrapper">
    <li class="left-wrap">

      <div class="menuList">

        <ul>
          <li>Menu 1</li>
          <li>Menu 2</li>
          <li>Menu 3</li>
          <li>Menu 4</li>
        </ul>

      </div>

    </li>
    <li class="right-wrap">
      Content here...

    </li>
  </ul>