Question

现在我有一个id为“wrapper”的主div，在这个div中我试图制作另外两个占用“包装器的整个宽度的div “即可。第一个div “sidebar”很窄，包含我想要显示在“wrapper”最右侧的一些信息。我用的第二个内部div将使用php和javascript从用户插入的数据中动态更新，id称为“maincontent”。

我可以先将它们放在“包装纸”里面。在“maincontent”div中添加新内容时会出现问题。添加新内容后，“侧边栏”div将按比例移动到新添加内容的高度。

所以，我的问题是：

如何让两个内部div保持在页面顶部的位置，同时仍然能够动态向下扩展而不会有任何移动？

Answer 1

您需要float:left左侧内容：

见下面的CSS：

  .wrapper
  {
     margin:0;
     padding:0;
     top:10px;
     width:100%;
     height:500px;
     background-color:yellow;
  }
  .left-content
  {
     position:relative;
     width:20%;
     background-color:red;
     height:100%;
     float:left;
  }
  .main-content
  {
     position:relative;
     width:80%;
     left:20%;
     background-color:green;
     height:100%;

  }

你的div如下所示：

<body>
<div class="wrapper">
  <div class="left-content">
  </div>
  <div class="main-content">
  </div>
</div>
</body>

重要的是，您准确地将父级的宽度划分为子容器

即。 total width of child containers <= parent width

请参阅，您需要了解css-style的position属性当您为任何容器position:relative执行时，top, left,right,bottom等css属性开始为它们工作。

Answer 2

查看我的小提琴，Javascript完全没必要。如果它对您有所帮助，或者您还有任何疑问，请告诉我。最重要的部分是在maincontent和侧边栏中都有float: left或float: right。 http://jsfiddle.net/y89zp/

麻烦将div放在其他div中

2 个答案: