Html div使页面太高

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

Obs。这是页脚*我提到它时使用了一个php include标记，将其添加到页面的其余部分

（对我的英语感到抱歉）

Html:

图片：

---

嗯，这就是

位置：relative

所做的-它将元素从其原始位置移动，而不会影响页面的布局

---

您最好使用浮动来实现此布局。由于这四个内容框具有相似的样式，我还建议给它们一个通用的类名，而不是给每个内容框分配一个唯一的ID。

好吧，这就是

位置：relative

的作用-它将元素从其原始位置移动，而不会影响页面的布局

---

您最好使用浮动来实现此布局。由于这四个内容框具有相似的样式，我还建议为它们指定一个通用的类名，而不是为每个内容框指定一个唯一的ID。

hmmmm很有意义！！非常感谢你！嗯，有道理！！非常感谢你！

<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>

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;
}