Div正在使页面太高

Question

所以，我有一个页面，在屏幕上重新定位了多个div。问题是，当我向它添加一个div时，页面会变得更高。

OB的。这是页脚。 *我用php include标签提到它，将其添加到页面的其余部分。

（抱歉我的英文）

HTML：

<div id="rodape_content">
<div id="conteudo"><br/>
        <center>
            <img src="img/sonhe_as_solucao.png" width="300" height="66"/>
        </center>
        <br/>

        <div id="modelo01">
            <p><img src="img/modelos/comercio.png" width="50" height="50" align="left"/>
                <font color="#fff">COMÉRCIO ELETRÔNICO
                    <p align="justify">Sites de comércio eletrônico (e-commerce/ loja virtual) é um grande diferencial
                        competitivo para qualquer empresa, independente do porte da mesma. Com a After Solutions, você
                        poderá vender suas mercadorias on-line com facilidade e profissionalismo, dispondo das mais
                        modernas ferramentas do mercado.</p>
                </font>
        </div>
        <div id="modelo02">
            <p><img src="img/modelos/dinamicos.png" width="50" height="50" align="left"/>
                <font color="#fff">SITE DINÂMICO (PHP)
                    <p align="justify">Sites dinâmicos, em PHP, são sites "programados" para uma finalidade específica,
                        seja gerenciar uma área do cliente ou então ter uma interface de manutenção do seu próprio
                        website. Exemplos de plataformas em PHP: Wordpress (gerenciamento de website), WHMCS
                        (gerenciamento de clientes e produtos) e PHPbb (gerenciamento de forum).</p>
                </font>
        </div>
        <div id="modelo03">
            <p><img src="img/modelos/blogs.png" width="50" height="50" align="left"/>
                <font color="#fff">BLOGS
                    <p align="justify">Os blogs, atualmente, destacam-se pela facilidade de adicionar e expor conteúdos.
                        Exemplos? Blogs de Humor integrados com as redes sociais, blogs de notícias, pessoais entre
                        outros. Na After Solutions, você tem a comodidade de ter um blog "desenhado" em sintonia com o
                        conteúdo postado.</p>
                </font>
        </div>
        <div id="modelo04">
            <p><img src="img/modelos/blogs.png" width="50" height="50" align="left"/>
                <font color="#fff">PORTFÓLIO
                    <p align="justify">Um portfólio, é a melhor maneira para um artista expor seu trabalho. A After
                        Solutions desenvolve portfólios para todo o tipo de artista, seja para músicos, pintores,
                        fotográfos... Além disso, é possível integrar seu portfólio com um blog, com uma loja virtual ou
                        ambos! Exponha, anuncie, venda sua obra! </p>
                </font>
        </div>
    </div>

CSS：

body, td, th {
    color: #999;
    background-image: url(../img/fundo.png);
    background-repeat: repeat;
    margin: auto;
    font-family: "Arial Narrow", cursive;
}
#conteudo {
    width: 920px;
    margin: auto
}
#modelo01 {
    width:220px;
    height:250px;
    position:relative;
    background-image:url(../img/sub_cabecalho_bg.png);
    -moz-border-radius: 5px;  /* for Firefox */
    -webkit-border-radius: 5px; /* for Webkit-Browsers */
    border-radius: 5px; /* regular */
    border: 2px solid #CCC;
    clear:both;
}
#modelo02 {
    width:220px;
    height:250px;
    position:relative;
    top: -254px;
    left:230px;
    background-image:url(../img/sub_cabecalho_bg.png);
    -moz-border-radius: 5px;  /* for Firefox */
    -webkit-border-radius: 5px; /* for Webkit-Browsers */
    border-radius: 5px; /* regular */
    border: 2px solid #CCC;
    clear:both;
}
#modelo03 {
    width:220px;
    height:250px;
    position:relative;
    top: -508px;
    left:460px;
    background-image:url(../img/sub_cabecalho_bg.png);
    -moz-border-radius: 5px;  /* for Firefox */
    -webkit-border-radius: 5px; /* for Webkit-Browsers */
    border-radius: 5px; /* regular */
    border: 2px solid #CCC;
    clear:both;
}
#modelo04 {
    width:220px;
    height:250px;
    position:relative;
    top: -762px;
    left:690px;
    background-image:url(../img/sub_cabecalho_bg.png);
    -moz-border-radius: 5px;  /* for Firefox */
    -webkit-border-radius: 5px; /* for Webkit-Browsers */
    border-radius: 5px; /* regular */
    border: 2px solid #CCC;
    clear:both;
}
#rodape_content {
    width: 100%;
    height: auto;
    background-color: #099;
    margin-top: 0px;
    border-top: 5px solid #ccc;
}        

照片：

Answer 1

嗯，这就是position: relative的作用 - 它会将元素从原始位置移开而不会影响页面的布局。

使用浮点数实现此布局会更好。由于这四个内容框具有相似的样式，我还建议给它们一个共同的类名，而不是为每个内容框分配一个唯一的ID。