摺疊容器的內容

-1

我正在對以下網站工作：Public-Journalism.com摺疊容器的內容

在中間我有內容。它包含三列/格：橫幅和左邊各一個，實際內容一個。所有三個都被包裹在一個名爲div class =「midbar_container」的水平欄中。

由於某些原因，中間div需要非常罕見的屬性，我沒有寫。例如，有時它會忽略浮動左邊的屬性並將最左邊的位置放在最左邊，而另一個div浮動在那裏。有時需要的寬度等於完整網站的寬度。我查了一些像clearfix這樣的東西，但似乎沒有任何幫助。代碼也非常短，與其他兩個div非常相似，但這些代碼似乎按照它們應有的工作。有人能幫我弄清楚什麼是錯的嗎？

我有以下的html代碼：

<div id="midbar_container"> 

<link type="text/css" rel="stylesheet" href="/styles/leftcolumn.css"/>  
<div id="leftcolumn"> 
Linkerkolom 
</div> 

<div id="content_container"> 
Welcome to Public-Journalism.com 
</div> 

<link type="text/css" rel="stylesheet" href="/styles/rightcolumn.css"/> 
<div id="rightcolumn"> 
Rechterkolom 
</div> 

</div>

而且CSS代碼：

#midbar_container { 
    clear: both; 
    overflow: auto; 
    background-color: yellow; 
} 

#cotent_container { 
    float: left; 
    width: 500px; 
    background-color: green; 
} 

#leftcolumn { 
    float: left; 
    width: 150px; 
    height: 500px; 
    background-color: red; 
} 

#rightcolumn { 
    float: left; 
    width: 150px; 
    height: 500px; 
    background-color: red; 
}

我必須提到的是被包括來自不同的CSS文件的CSS代碼，這樣我可以在不同頁面上重複使用某些代碼這可能是原因嗎？

來源

2015-05-29 user2756101

你可以看到的例子，右列是由content_container壓下一點點。他們都在同一高度開始，因爲他們都是左轉。 – user2756101

檢查下面的代碼片段。在你的CSS你錯誤地命名爲#content_container爲#cotent_container。和我已經添加了一些CSS，只是看看它。

#midbar_container { 
 
    
 
    overflow: auto; 
 
    background-color: yellow; 
 
width:100% 
 
} 
 

 
#content_container{ 
 
    float: left; 
 
    width: 300px; 
 
    background-color: green; 
 
display:inline-block; 
 
} 
 

 
#leftcolumn { 
 
    float: left; 
 
    width: 150px; 
 
    height: 500px; 
 
    background-color: red; 
 
display:inline-block; 
 
} 
 

 
#rightcolumn { 
 
    float: left; 
 
    width: 150px; 
 
    height: 500px; 
 
    background-color: red; 
 
display:inline-block; 
 
}

<div id="midbar_container"> 
 

 
<link type="text/css" rel="stylesheet" href="/styles/leftcolumn.css"/>  
 
<div id="leftcolumn"> 
 
Linkerkolom 
 
</div> 
 

 
<div id="content_container"> 
 
Welcome to Public-Journalism.com 
 
</div> 
 

 
<link type="text/css" rel="stylesheet" href="/styles/rightcolumn.css"/> 
 
<div id="rightcolumn"> 
 
Rechterkolom 
 
</div> 
 

 
</div>

來源

2015-05-29 12:48:43 Jayababu

非常感謝！ – user2756101

摺疊容器的內容

回答

相關問題