當父母是浮動：左和孩子是固定的，如何設置位置？

Question

我想更改上面的圖片，如下所示。

請參考下面的代碼。

我想知道如何在不解決這個問題「填充左，利潤率左」

.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; 
 
}

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

 
<div class="content-wrap"> 
 

 
</div>

Answer 1

嘗試this，而不是 - 我已經創建了一個準系統你不引導。你可以從這裏開始。

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