折叠容器的内容

-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

折叠容器的内容

回答

相关问题