文章/答案/技术大牛

发布

社区首页 >问答首页 >容器内的CSS定位盒

问容器内的CSS定位盒
EN

Stack Overflow用户

提问于 2014-05-06 07:10:12

回答 3查看 59关注 0票数 0

我如何使我的内容容器有相同的填充在右边的侧边栏，也定位了几个像素旁边的侧边栏，其顶部与侧边栏相同的水平？

http://jsfiddle.net/liondancer/Pvr73/2/

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

我的html：

{%加载静态文件%}

<!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>

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-05-06 07:19:49

您需要使用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/

谢谢

票数 1

Stack Overflow用户

发布于 2014-05-06 07:22:42

请检查小提琴，忽略颜色只是改变它，以更好的能见度。;)

演示链接

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;

 }

票数 1

Stack Overflow用户

发布于 2014-05-06 07:26:44

这就是你想要的吗？

小提琴

.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 */
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23488128

复制

相似问题

问容器内的CSS定位盒
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问容器内的CSS定位盒EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问容器内的CSS定位盒
EN