在<footer>元素内使用2个部分的问题

debugcn 发表于 Dev

奥兹

我正在尝试在我的<footer>元素中包含2个部分。

我的第一部分希望包含一些内容栏目。（应得的）

我的第二部分我想放在第一部分的下面，我想有一个黑色的背景，其段落左对齐。

我认为即时通讯一切正常，但无法正常工作。

您看到我的代码有什么问题吗？

我有这个：

在此处输入图片说明

但我正在尝试：

在此处输入图片说明

我的问题与我的jsfiddle：

http://jsfiddle.net/ra3zc/1/

我的html：

<footer id="footer-container">
    <section id="footer">
         <div id="col" >
            <h1>Title of my column 1</h1>
            <p>Content of col 1</p>
        </div>
         <div id="col" >
            <h1>Title of my column 2</h1>
            <p>Content of col 2</p>
        </div> 
         <div id="col" >
            <h1>Title of my column 3</h1>
            <p>Content of col 3</p>
        </div> 
    </section>
  <section id="footer2">
        <p>&copy; I want copyright float at left in section 2</p>
    </section>
  </footer>

我的CSS：

#footer-container
{
    width:100%;
    height:auto;
    float:left; 
    background:gray;
} 

#footer
{
    width:960px;
    margin:0 auto 0 auto;
}

#col
{
    float:left;
    margin-right:40px; 
    margin:10px 53px 10px 0;
    width:200px;
}

#col h1
{
    color:#fff; 
    font-size:17px;
    font-weight:bold; 
    margin-bottom:10px; 
}

#col p
{

    color:#ccc; 
    font-size:14px; 
    margin-bottom:10px;
}  


#footer
{
    width:960px;
    margin:0 auto 0 auto;
    background:#000;
    height:100px;
}

艾曼·萨法迪（Ayman Safadi）

基本上，您的花车没有清理。

您需要了解的有关浮动的所有信息：http：//css-tricks.com/all-about-floats/

试试这个：http :
//jsfiddle.net/ra3zc/2/

#footer-container {
    width:100%;
    height:auto;
    background:gray;
}
#footer {
    overflow: hidden;
    width:960px;
    margin:0 auto 0 auto;
}
#col {
    float:left;
    margin-right:40px;
    margin:10px 53px 10px 0;
    width:200px;
}
#col h1 {
    color:#fff;
    font-size:17px;
    font-weight:bold;
    margin-bottom:10px;
}
#col p {
    color:#ccc;
    font-size:14px;
    margin-bottom:10px;
}
#footer2 {
    width:960px;
    margin:0 auto 0 auto;
    background:#000;
}
#footer2 p {
    padding: 2em 0;
    color: white;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。