Question

我试图找出为什么这个页脚行为异常。如果您在演示中注意到位置部分中的HR标签正被推到页面底部。这正在改变布局。此外，我试图让Facebook图标浮动：向左移动，使其位于＆＃34; Network With Us部分内的HR标签的左侧。＆＃34;我的CSS看起来很好，但这是我第一次使用html5的section标签。

此外，我在使用背景颜色或边距顶部时遇到麻烦：50px到我的＃footer.It＆＃39; s好像#footer无视我。

这是我的Demo

 #footer {
    background-color:#95643d;
    width:100%;
    margin:30px 0px 0px 0px;
    clear:both;
}
#footer h3 {
    font-family: 'Dancing Script', cursive;
    font-weight:700;
    color:#FFF; 
    font-size:2em;
}
#footer hr {
    width:60%;
    float:left;
    height:4px;
    background-color:#FFF;
}
#footer p {
    margin:0px;
    padding: 0px;
    color:#FFF; 
    font-family: 'Arimo', sans-serif;   
}
#footer_logo {
    width:25%;
    float:left; 
    background-color:#95643d;   
}
#footer_logo img {
    margin:20px 0px 0px 20px;   
}
#footer_network {
    width:25%;
    float:left; 
    background-color:#95643d;   
}
#footer_contact {
    width:25%;
    float:left; 
    background-color:#95643d;   
}
#footer_network img {
     float:left;   
}
}
#footer_location {
    width:25%;
    float:left; 
    background-color:#95643d;   
}

Answer 1

您可以使用此CSS：

    /* Footer */

#footer {
    background-color:#95643d;
    width:100%;
}
#footer h3 {
    font-family: 'Dancing Script', cursive;
    font-weight:700;
    color:#FFF; 
    font-size:2em;
    text-align: center;
}
#footer hr {
    width:100%;
    float:left;
    height:4px;
    background-color:#FFF;
}
#footer p {
    margin:0px;
    padding: 0px;
    color:#FFF; 
    font-family: 'Arimo', sans-serif;   
    text-align: center;
    margin-bottom: 10px;
}
#footer_logo {
    width:100%;
    float:left; 
    background-color:#95643d;   
}
#footer_logo img {
    margin: 10px auto;
    display: block;
}
#footer_network {
    float:left; 
    background-color:#95643d;   
    width: 33%;
}
#footer_contact {
    width: 33%;
    float:left; 
    background-color:#95643d;   
}
#footer_network img {
    margin: 0 auto;
    display: block;  
}
#footer_location {
    display: inline-block;
    background-color:#95643d;   
    width: 34%;
}

Answer 2

在这里，您似乎正在修复您的问题：http://jsfiddle.net/weissman258/kpo4y108/10/。

以下是我添加的内容。

#footer {
    display:inline-block;
}

#footer_network {
    position:relative;
}
#footer_network a {
    position:absolute;
    left:0;
}
#footer_location {
    display:inline-block;
}

除了删除：

#footer_network img {
     float:left;   
}

编辑：你位置的第一行似乎是对齐的，所以做了另一个修改来解决它：

#footer p {
clear:left;
}

Answer 3

添加此规则：

section{
    overflow:hidden;
}

Answer 4

此外，我在应用背景颜色或边距顶部时遇到麻烦：50px到我的＃footer.It好像#footer无视我。

当你有浮动时，父元素会崩溃，所以你必须clear the floats。一种常用的技术是clearfix类。应用于您的元素，它看起来像这样：

#footer:after {
  content: "";
  display: table;
  clear: both;
}

我有一个清洁代码的小提琴，你可以在方便的时候使用它的一部分或整个东西。 https://jsfiddle.net/r3ruzLL2/2

https://jsfiddle.net/r3ruzLL2/2/embedded/result/

编辑：对于Facebook徽标，一个简单的解决方案是使用否定margin-top。

Answer 5

这是你的小提琴https://jsfiddle.net/kpo4y108/6/。你的html中有你不需要的中断。你有不同div的背景，如果你只有一种颜色，你不需要这些背景。如果您有任何问题，请告诉我。

<div id="footer">
    <section id="footer_logo">
        <img src="http://nuskinprinting.com/atticstash/images/as_logo.png" />
    </section>
    <section id="footer_network">
        <a><img src="http://nuskinprinting.com/atticstash/images/facebook_icon.png" /></a>
       <h3>Network With Us</h3>
        <hr />
    </section>
    <section id="footer_contact">
        <h3>Contact Us</h3>
        <hr />
        <p> Vivian@advancedlitho.com<br />(972)999-9999 </p>
    </section>
    <section id="footer_location">
        <h3>Location</h3>
        <hr />
        <p> Orange Circle Antique Mall<br />118 South Glassell Street<br />Orange, CA 92866<br />(714)538-8160<br />Mon. 10 a.m. - 4:45 p.m.<br />Tues - Sat 10 a.m. - 5:45 p.m.<br />Sun. 11 a.m. - 5:45 p.m. </p>
    </section>
</div>

的CSS：

/* Footer */

#footer {
    background-color:black;
    width:100%;
    margin:30px 0px 0px 0px;
    clear:both;
    float:left;

}
#footer h3 {
    font-family: 'Dancing Script', cursive;
    font-weight:700;
    color:#FFF; 
    font-size:1.5em;
    margin:0px;
    padding:0px;
}

#footer hr {
    width:60%;
    float:left;
    height:4px;
}
#footer p {
    margin:0px;
    padding: 0px;
    color:#FFF; 
    font-family: 'Arimo', sans-serif;   
    float:left;
    word-wrap:break-word;
}
#footer_logo {
    width:25%;
    float:left; 
}
#footer_logo img {
    margin:20px 0px 0px 20px;
    max-width:80%;
}
#footer_network {
    width:25%;
    float:left; 
}
#footer_contact {
    width:25%;
    float:left; 
}
#footer_network img {
     float:left;
    width:25px;
    height:25px;
    margin: 5px 5px 0 0;
}

#footer_location {
    width:25%;
    float:left; 
}

页脚布局问题

5 个答案: