折叠内容

Question

我正在以下网站上工作：Public-Journalism.com

在中间我有内容。它包含三列/ div：左边和右边一个用于横幅，一个在中间用于实际内容。所有三个都被包裹在一个名为div class =＆＃34; midbar_container的水平栏内。＆＃34;

由于某种原因，中间div占用了我没有写过的非常罕见的属性。例如，有时它会忽略float left属性，并且在那里有另一个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文档中，以便我可以在不同的页面上重用某些代码。这可能是原因吗？

Answer 1

检查以下代码段。 在您的CSS中，您错误地将ID #content_container命名为#cotent_container。 我添加了一些CSS，只是看看它。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;