問題定位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

回答

相關問題