Question

我正在寻找使容器仅包含网页右侧的最佳解决方案（因为左侧有侧边栏）

例如，我尝试将.content的宽度设置为80％，但是显然它从右侧而不是左侧删除了20％。

HTML

<div class="content">
  <button type="button" id="skidaj" class="btn btn-dark btn-lg">Download CV</button> 
</div>

CSS

.content{
background-image: url("moja.jpg");
background-size: cover;
background-repeat: no-repeat;
background-color: black;
opacity: 0.7;
width: 100%;
height: 100vh;
display:flex;
justify-content: center;
align-items: center;
padding-left: 170px;
clear:both;
float: left;
        }

  #sideNav {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 170px;
    height: 100vh;
  }

.content仅应在右侧放置容器，但这也会影响我的侧边栏。

Answer 1

创建一个具有相对位置的主div，并在其中创建侧边栏和内容。现在，您可以将容器和侧边栏放置在主div内的此代码段的任意位置：

#main{
  width:100%;
  postion:relative;
}
.sidebar{
  position:absolute;
  width:20%;
  height:100px;
  background-color:yellow;
  float:left;
  left:0;
  top:0;
}
.container{
  width:80%;
  height:100px;
  background:#ccc;
  position:absolute;
  left:20%;
  top:0;
}

<div id="main">
  <div class="sidebar"> 
    
  </div>
  <div class="container">
    
  </div>
</div>

如何制作不包含侧边栏的容器？

1 个答案: