Question

你可以在这个jsfiddle上看到，http://jsfiddle.net/gGXzA/我的页脚与我的DIV混合在一起。我希望它放在下面（在页面底部）任何想法是什么问题是什么？非常感谢，

<div class="wrap980px blueback clear">
    <div id="block-left">
        <p>Lueq ets el rôle ud cocha ?</p>
        <ul>
            <li>ovus éteocur vcea epetimha, cspetre te tieanrulté</li>
            <li>svou aeermn à oivr la tiiunasot rettemaun</li>
            <li>svuo iader à nidetrifie, en souv, les esossecrru nécaesiesrs ua eahnemctgn</li>
            <li>suvo meaern à rtvennie ortve roprpe iootnsul</li>
            <li>ouvs ccremagopan outt ua glon de al eism en epac ud lpna d’ontaic qjuus’à l’teiatnet de orvte etjibcof</li>
        <ul>
    </div>
    <div id="block-right">
        <p>Euq peut ovsu praoptre un goccnhai ? enrderrpe cnianefco ne usvo uovs déraebssrra ed vso acsnoecyr aileinttsm et autsre epnsées néiavtsge oedrirbn, easspr nu apc ildiffeic anrdprpee à eifra caef axu asiuitnsto déiaeltcs (er)nenord ud sesn à otrve evi êert rtauec de rveot evi raspes à l’otcnia, edinteatr ovs ifjbtcose rdneno evi à vos rêsve sovu nestri uexmi dsna tevor aupe, êter plsu hreuuxe viora ed ueesrlmlei eatorsiln eacv els eutsar rengga ud ptesm : orrunmtse uen dffcilutié upls ermpntadie que si usvo y ieizfsa cfae ttuo esul.
        </p>
    </div>
</div>  <!-- End DIV 980px Clear-->

<div class="middle">
    <h1>Conclusion Ontcmme se déeourl nu cahcnoig de evi?</h1>

    <p>A iratpr ed etvro admnede, nsuo désinssnofi mlbenese un ijcofteb rpécsi à tdreantie à eun adte ndnoée, sel seymno à reemtt en acpel ourp y evrirar sniai qu’nu lpan d’tocani recctno.</p>

    <p>La 1ree iesrp ed totcanc rpa télépeonh set gerutiat. C’set l’acooscni urpo souv ed  ilrvade uqe roevt dedemna teern nbie nsad el cerda d’nu hacciogn, et de recoivre une rénospe à sottue els qnstueosi euq uvos suvo eszpo. Al 1ree séenac dreu 1h à 1h30 te a ropu obcijeft de leiarcifr rovte nmededa. Snou nuso nettmso d’rcocda rus le thèem de teorv vrlatai de caoigcnh et nruistcsnoso mebsneel le cottanr de cigcanoh terarnnep el oenrmb ed séansce rpésuev, erlu fréqcnuee, uler durée, uelr iatfr. Ce ttarocn tes rébjtalaues ua lfi sed séecsan te erts de lfi ountedcucr à treno ritaavl.</p>

    <p>Lse sénaecs tansviues tnso arsnccoése à rerpolex vrtoe rblpoéuaqmiet et à exrif eds éateps rpéscsei vres eluselslqe unos ocsaenanvr bnmleese au ufr et à esmeru. A euhqca étaep, onsu mrnesous els rporgés irselaés revs l’ittteane ed orevt ciejbfot acipirlpn. Al rndieèer sécena set snaocrcée à freai le oinpt sru el csorsseup ed icachngo, l’fibecjot eitantt, els reesrssuco (re)déeutosvrec te l’oemtnauoi auecisq.</p>
</div>

<div id="footer">!!!! Footer !!!! </div>

CSS

.middle {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    height: 280px;
}

.wrap980px {
    margin: auto;
    width: 980px;
}

#block-left {
    float: left;
    width: 490px;
    height: 300px;
    background: #ccc;
}

#block-right {
    float: right;
    width: 490px;
    height: 300px;
    background: green;
}

.clear:after {
    clear: both;
}


#footer{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    height: 280px;
    background:red;
    margin-bottom: 50px;
}

Answer 1

这是由于你的花车有问题。你需要清楚。你有，明确：之后，但这不起作用。

在中间部分之前添加一个.clear { clear: both; }类，然后添加一个<div class="clear"></div>。

在这里看一个小提琴http://jsfiddle.net/gGXzA/2/

Answer 2

Clear是一个好主意，但你也可以从.middle中删除静态高度。

删除它：

.middle {
 height: 280px;
}

Answer 3

问题出在height规则的.middle。删除height，它将修复

Answer 4

只需使用此css，这将正常工作DEMO

#footer{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    height: 280px;
    background:red;
    margin-bottom: 50px;
    clear:both; /*ADDED*/
}
.middle {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    height: 280px;
    clear:both; /*ADDED*/
}

Answer 5

喜欢这个

<强> demo

<强> CSS

*{
    margin:0;
    padding:0;
}
    .clear{
        clear:both;

    }

<强> HTML

<div class="wrap980px blueback clear">
<div id="block-left"><p>Lueq ets el rôle ud cocha ?</p>
<ul>
<li>ovus éteocur vcea epetimha, cspetre te tieanrulté</li>
<li>svou aeermn à oivr la tiiunasot rettemaun</li>
<li>svuo iader à nidetrifie, en souv, les esossecrru nécaesiesrs ua eahnemctgn</li>
<li>suvo meaern à rtvennie ortve roprpe iootnsul</li>
<li>ouvs ccremagopan outt ua glon de al eism en epac ud lpna d’ontaic qjuus’à l’teiatnet de orvte etjibcof</li><ul></div>
<div id="block-right"><p>Euq peut ovsu praoptre un goccnhai ?
enrderrpe cnianefco ne usvo
uovs déraebssrra ed vso acsnoecyr aileinttsm et autsre epnsées néiavtsge
oedrirbn, easspr nu apc ildiffeic
anrdprpee à eifra caef axu asiuitnsto déiaeltcs
(er)nenord ud sesn à otrve evi
êert rtauec de rveot evi
raspes à l’otcnia, edinteatr ovs ifjbtcose
rdneno evi à vos rêsve
sovu nestri uexmi dsna tevor aupe, êter plsu hreuuxe
viora ed ueesrlmlei eatorsiln eacv els eutsar
rengga ud ptesm : orrunmtse uen dffcilutié upls ermpntadie que si usvo y ieizfsa cfae ttuo esul.</p></div>
</div>  <!-- End DIV 980px Clear-->

<div class="middle"><h1>Conclusion Ontcmme se déeourl nu cahcnoig de evi?</h1>

<p>A iratpr ed etvro admnede, nsuo désinssnofi mlbenese un ijcofteb rpécsi à tdreantie à eun adte ndnoée, sel seymno à reemtt en acpel ourp y evrirar sniai qu’nu lpan d’tocani recctno.</p>

<p>La 1ree iesrp ed totcanc rpa télépeonh set gerutiat. C’set l’acooscni urpo souv ed  ilrvade uqe roevt dedemna teern nbie nsad el cerda d’nu hacciogn, et de recoivre une rénospe à sottue els qnstueosi euq uvos suvo eszpo.
Al 1ree séenac dreu 1h à 1h30 te a ropu obcijeft de leiarcifr rovte nmededa. Snou nuso nettmso d’rcocda rus le thèem de teorv vrlatai de caoigcnh et nruistcsnoso mebsneel le cottanr de cigcanoh terarnnep el oenrmb ed séansce rpésuev, erlu fréqcnuee, uler durée, uelr iatfr. Ce ttarocn tes rébjtalaues ua lfi sed séecsan te erts de lfi ountedcucr à treno ritaavl.</p>

<p>Lse sénaecs tansviues tnso arsnccoése à rerpolex vrtoe rblpoéuaqmiet et à exrif eds éateps rpéscsei vres eluselslqe unos ocsaenanvr bnmleese au ufr et à esmeru. A euhqca étaep, onsu mrnesous els rporgés irselaés revs l’ittteane ed orevt ciejbfot acipirlpn.
Al rndieèer sécena set snaocrcée à freai le oinpt sru el csorsseup ed icachngo, l’fibecjot eitantt, els reesrssuco (re)déeutosvrec te l’oemtnauoi auecisq.</p></div>
<div class="clear"></div>
<div id="footer">!!!! Footer !!!! </div>

无法将我的页脚放在正确的位置

5 个答案: