位置固定側邊欄和居中內容

Question

我完全失去了CSS，任何人都可以幫助我與中心和響應圖片在內容區域沒有黑客入侵的CSS？該固定的側邊欄使它很難，因爲我不能使用justify-content和align-items，因爲它會隱藏在側邊欄下。

感謝

<div class="container"> 
     <div class="sidebar"> 
     <ul> 
     <li> 
      <span>Home</span> 
     </li> 
     <li> 
      <span>Home</span> 
     </li> 
     </ul> 
     </div> 
     <div class="content"> 
     <img src="http://placehold.it/350x150" /> 
     <img src="http://placehold.it/350x150" /> 
     <img src="http://placehold.it/350x150" /> 
     </div> 
    </div> 

    .container { 
     padding-left:200px 
    } 

    .sidebar { 
     position:fixed; 
     height:100%; 
     width:200px; 
     top:0; 
     left:0; 
     background:#fff; 
     border-right:2px solid; 
    } 

JSFIDDLE

Answer 1

如果你只是試圖使圖像居中，你可以添加規則

.content { 
    text-align: center; 
} 

Answer 2

您可以使用Flexbox的。您仍然可以保留邊欄而不使用position: fixed;，只需沿着flex: 0 0 200px;並保持高度不同，然後將align-items: flex-start;添加到容器。更好的做法是將align-self: flex-start;放在.container上更具體。

退房完整的例子：

.container { 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    flex: 0 0 200px; 
 
    height:100vh; 
 
    width:200px; 
 
    background:#fff; 
 
    border-right:2px solid; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-self: flex-start; 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    <ul> 
 
     <li><span>Home</span></li> 
 
     <li><span>Home</span></li> 
 
    </ul> 
 
    </div> 
 
    <div class="content"> 
 
    <img src="http://placehold.it/350x150" /> 
 
    <img src="http://placehold.it/350x150" /> 
 
    <img src="http://placehold.it/350x150" /> 
 
    </div> 
 
</div>