位置固定侧边栏和居中内容

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>