问题定位divs在其他div

现在我有一个主要的div与ID为“包装”，并在这个div里面，我试图让另外两个div约占整个宽度“包装”。第一个div，“侧边栏”，很窄，并且包含我想要显示在“包装”最右侧的一些信息。我拥有的第二个内部div将使用php和javascript从用户插入的数据动态更新，ID为“maincontent”。问题定位divs在其他div

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

所以，我的问题是这样的：

如何获得两个内部的div来维持，同时仍然能够在没有任何走动动态向下延伸的页面顶部的立场？

来源

2013-03-03 Eric

去做一个小提琴 - http://jsfiddle.net – Manoj 2013-03-03 07:34:44

你可以创建一个只有div结构的jsfiddle吗？ – asifrc 2013-03-03 07:34:51

你需要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>

最重要的是，你准确地划分父级到子容器的宽度

ie total width of child containers <= parent width

看，你需要了解position的CSS样式属性，当你对任何容器做position:relative，像top, left,right,bottom CSS属性开始为他们工作。

来源

2013-03-03 07:52:53

看看我的小提琴，Javascript是完全没有必要的。让我知道它是否对你有帮助，或者你还有什么问题。最重要的部分是在maincontent和sidebar中都有float: left或float: right。 http://jsfiddle.net/y89zp/

来源

2013-03-03 07:58:23 asifrc

问题定位divs在其他div

回答

相关问题