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>

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

2 个答案: