Question

如何让我的内容容器在侧边栏右侧具有相同的填充，并且还在侧边栏旁边放置几个像素，其顶部与侧边栏相同？

这让我感到困惑，因为我不知道我可以使用的所有属性。

我的HTML：

{％load staticfiles％}

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  </head>
  <body>
    <div class="container">
      <div class="home-button">
      </div>
      <div class="sidebar">
      </div>
      <div class="content-container">
        {% block content %}

        {% endblock %}
      </div>

    </div>
  </body>
</html>

Answer 1

你需要使用float：left和float：right来将它们对齐在同一级别。

.sidebar {
    background-color: #CCFF99;
    height: 100%;
    width: 100px;
    margin-top: 20px;
    float:left;
}


.content-container {
    background-color: #E6D1E6;
    width: 350px;
    height: 100%;
    margin-right: 4%;
    margin-top: 20px;
    float:right;
}

检查此jsFiddle以获取更改的代码

http://jsfiddle.net/Pvr73/5/

由于

Answer 2

请检查小提琴，忽略颜色只需更改它以获得更好的可见度。 ;）

Demo Link

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #C2C2C2;
}

.home-button {
background-color: #FFCCFF;
height: 45px;
width: 175px;
}


.sidebar {
background-color: green;
height: 200px;
width: 100px;
margin-top: 20px;
    position: fixed;
}

.container {
width: 70%;
background-color: #E0E0E0;
height: 100%;
margin-right: auto;
margin-left: auto;
position: relative;
padding-left: 4%;
padding-right: 4%;
padding-top: 2%;
padding-bottom: 2%

}

.content-container {
background-color: red;
position: relative;
width: 320px;
height: 80%;
padding-right: 4%;
    float: right;
    margin-top: 20px;

 }

Answer 3

这是你想要的吗？

FIDDLE

.sidebar {
    background-color: red;
    height: 200px;
    width: 100px;
    margin-top: 20px;
    float:left;/* added */
}
.content-container {
    background-color: blue;
    position: relative;
    width: 350px;
    height: 100%;
    float:right;/* added */
    margin:20px 5px;/* added */
}

CSS定位盒内的容器

3 个答案: