Question

我一直在为客户登陆页面工作，当我试图将我的footer_content保持在页脚内部时，我遇到了一个问题所有页面都是响应式的，但是当涉及到footer_content时，他只是没有工作。正确的知道我把它设置回px而不是％来展示一些功能性工作，但是如果你们可以帮助我做出反应并在页脚内阻止它并且真的很感激它。我现在的代码是：

<div class="foot">
    <div class="foot_content">
    <div class="foot_title">
        <p style="font-size:18px; font-weight:bold; margin-left:auto; margin-right:auto">AS NOSSAS FUNCIONALIDADES<p>
        <p style="font-size:12px; margin-left:auto; margin-right:auto; line-height:18px">Para o ajudar a encontrar os seus futuros clientes.<p>
    </div>
    <div class="foot_text_content">
        <div class="foot_text_col_1">
            <img src="img/pub.png" alt="publicidade" />
            <p style="font-size:14px; font-weight:bold; margin-top:10px">GERIMOS A SUA PUBLICIDADE<p>
            <div style="line-height:16px; margin-top:5px; font-size:14px">
                <p>A nossa equipa de designers está<p>
                <p>sempre pronta para dár resposta às<p>
                <p>suas necessidades criativas.<p>
                <p>Assim que resolvidas poderemos<p>
                <p>ainda publicitá-las no nosso website.<p>
            </div>
        </div>
        <div class="foot_text_col_2">
            <img src="img/negocio.png" alt="negócio" />
            <p style="font-size:13px; font-weight:bold; margin-top:10px">GERAMOS NEGÓCIOS<p>
            <div style="line-height:16px; margin-top:5px; font-size:14px">
                <p>O nosso website funciona como uma<p>
                <p>rampa de lançamento para o seu negócio.<p>
                <p>Através do “SEO” do nosso website,<p>
                <p>garantimos que a sua publicidade<p>
                <p>chegará a todos os seus clientes.<p>
            </div>
        </div>
        <div class="foot_text_col_3">
            <img src="img/success.png" alt="negócio" />
            <p style="font-size:13px; font-weight:bold; margin-top:10px">GARANTIMOS SUCESSO<p>
            <div style="line-height:16px; margin-top:5px; font-size:14px">
                <p>Com todas estas ferramentas que<p>
                <p>referimos, o seu sucesso será<p>
                <p>garantido, resta-lhe apenas fechar<p>
                <p>negócio.<p>
            </div>
        </div>
    </div>
</div>
<div class="background">
    <img src="img/foot_bg.png" />
</div>

和css是

.foot {
    position:absolute;
    margin-bottom:auto;
    bottom: 0;
    width:100%;
    height: 41.5%;
}

.background {
    background: none repeat scroll 0 0;
    height: 100%;
    width: 100%;
    bottom: 0;
    margin-bottom:auto;
    position:absolute;
}

.background img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    width:100%;
    min-width:90%;
    height: 100%;
    min-height:41.5%;
    right: 0;
    top: 0;
    z-index:-1;
}

.foot_content {
    width:960px;
    height:258px;
    margin:auto;
    bottom:20px;
    left:0;
    right:0;
    position:absolute;
    z-index:1;
}

.foot_title {
    width:960px;
    height:34px;
    font-family: Arial, sans-serif;
    text-align:center;
}

.foot_text_content {
    width:960px;
    height:193px;
    margin-top:30px;
}

.foot_text_col_1 {
    width:267px;
    height:193px;
    font-family: Arial, sans-serif;
    text-align:center;
    float:left;
}

.foot_text_col_2 {
    width:267px;
    height:193px;
    font-family: Arial, sans-serif;
    text-align:center;
    float:left;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    position:absolute;
}

.foot_text_col_3 {
    width:267px;
    height:193px;
    font-family: Arial, sans-serif;
    text-align:center;
    float:right;
}`

提前致谢

编辑按要求提供的小提琴链接https://jsfiddle.net/wppo1bvo/

将内容保留在页脚内

0 个答案: