Question

我有一个CSS，其主体标记和标题具有以下属性：

body
{
    font-size: 0.87em;
    font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
    margin: 0;
    padding: 0;
}

div#header
{
    width:1024px;
    margin:5px auto;
    height:180px;
    background-color: rgb(91,25,79);
}
div.headerLeft
{
    height:100%;
    width:850px;
    border-right:10px solid rgb(169, 171, 174);
    background-color: rgb(124,71,111);
}
div#footer
{
    margin-top:10px;
    text-align:center;
    position:relative;
    font-size: 1.27em;

}
div#content
{
    margin:auto 40px;
    width:200;
    overflow: auto;
}

在我的HTML中，我的身体有以下结构：

<body>
    <div id="header">
        <div class="headerLeft" />
    </div>
    <div id="waycontact">

        <div class="contactPaula">
            <p>paulaMACHADO</p>
            <p>crea 97877/D-MG</p>
            <p>(31) 8725 5393</p>
        </div>
        <div class="contactBeatriz">
            <p>beatrizDAMAS</p>

            <p>crea 94660/D-MG</p>
            <p>(31) 9216 6968</p>
        </div>
        <div class="address">
            <p>av. álvares cabral, 381, sl. 604, centro - belo horizonte - mg</p>
            <p>cep: 30170-000 - telefax: (31) 3222 0345</p>
            <p><a class="remove-linkcss" href="mailto:amsd_arq@yahoo.com.br">amsd_arq@yahoo.com.br</a></p>

        </div>
    </div>

    <div id="content">

<img class="left space" alt="Arquitetura" src="http://cdn.archdaily.net/wp-content/uploads/2009/05/1265154380_107-silos-090511-west-view-a4-allard-architecture-528x304.jpg" />
<h2>Sobre a empresa</h2>
<p>A AMSD é focada em qualidade..</p>



    </div>

    <div id="footer">

        <a class="current" href="#">home</a>
        <span class="space">|</span>
        <a href="#">quem somos</a>
        <span class="space">|</span>
        <a href="#">blog</a>
        <span class="space">|</span>

        <a href="#">na mídia</a>
        <span class="space">|</span>
        <a href="#">contato</a>
    </div>
</body>

Here您可以看到该页面的完整代码。

在CSS中，你可以完全看到它有一个名为“.redborder”的类，她的三月是带有红色边框的HTML元素。注意身体标有红色。但最终结果我注意到身体只考虑头部。他为什么要到最后？

Answer 1

更改：

<div class="headerLeft" />

纠正（HTML和“营销”XHTML）：

<div class="headerLeft"></div>

更多信息http://www.w3.org/TR/xhtml1/#C_3

同时添加缺失</div>（<div id="header">）。在此之后它应该没问题。

Answer 2

很抱歉，如果我错过了解释问题，但您希望红色边框一直延伸到内容上吗？

如果是这样，我发现实现此目的的方法是简单地将clear: both;属性添加到您想要由红色边框div覆盖的最后一个div。

Appologies这不是你想要回答的问题

了解HTML / CSS的行为

2 个答案: