css - 如何添加另一個div與2 colums佈局之一？

這裏是我的小提琴： http://jsfiddle.net/LLFpp/css - 如何添加另一個div與2 colums佈局之一？

我剛開始學習CSS和Div的（從舊錶動過），我試圖找出如何把上面的綠格的另一個已經存在的綠色div，在2個div之間有一個20px的空間，同時保留右側的div。

我試圖做到這一點，因爲我會與表，但它然後擰緊整個佈局，推下右邊的div。

所以基本上我現在有：

| |

我需要：

| | 
|

有道理？：D

來源

2012-06-26 user1227914

您需要爲「綠色」div設置一個容器，並將其保存爲一個容器。

是這樣的：

<div id="bigcontainer"> 
    <green div 1> 
    <green div 2> 
</div> 
<div id="menu"> 
<!--whatever--> 
</div>

在你的CSS

#bigcontainer{float:left;}

那麼你可以做任何你想要的「綠色申報單」，而不影響主要的設計。

希望這是很清楚:)

來源

2012-06-26 00:34:37

謝謝你，會嘗試，現在:) – user1227914

剛剛試了一下，由於某種原因，它推動右側框一路下跌的頁面:( – user1227914

寬度可能是問題，設置一個固定寬度的「bigcontainer」並將它們左對齊，這樣菜單就可以保持在右邊 –

也許是這樣的：

div.left_box{ 
    float: left; 
} 

div.right_box{ 
    float: right; 
}

然後把你的兩個綠色DIV部分的left_box DIV中。

來源

2012-06-26 00:35:50 JohnP

這將使用左側父列來預先添加新內容。通過爲標題賦予一個id，然後調整el變量中的id，仍然可以保留綠色背景並位於標題下。這真的取決於不斷變化的內容會是什麼樣子。

$(function(){ 
var el = document.getElementById("main"); 
var parent = el.parentNode; 
var newContents = document.createElement("div"); 
newContents.innerHTML = "<p>New Content</p>"; 
newContents.style = "margin-bottom: 20px"; 
parent.insertBefore(newContents,el); 
});

http://jsfiddle.net/LLFpp/10/

來源

2012-06-26 00:53:19

css - 如何添加另一個div與2 colums佈局之一？

回答

相關問題