Question

这是针对Web开发课程中的项目。我们有一个课堂教科书和一个教师作为例子的视频，以及最终结果应该是什么样子。该项目应该在div创建的类型表中包含一个标题，两列和一个页脚。但是，我们不能使用表函数，因此这是html中非常具体的编程。

因此，在将文本添加到div对齐表后，对齐完全错误配置，或者没有文本时未对齐到完美对齐。我已经提供了下面的编程，尽管e页面的高度设置与文本不同。文字很重要，但我不确定金额是多少。

我的问题是，一旦我将文本添加到项目中，如何才能使我的列和页脚与我的标题匹配？我还必须将这个讨厌的标题添加到主框架的底部，它似乎想要将其自身附加到任何东西。

完成一些结束标记我遇到了页脚现在显示在标题后面的问题，在编辑主框架后，它现在显示为一条线（不在我的框内容周围。

注意：必须保持位置：绝对适合这个项目

    <!DOCTYPE html>
    <html lang="en">

   <!--
    documentation segment
    website: Operating Systems
    web page: Home
    author: Clinton B Scott
    date created: May.2014
    -->

    <head>
    <meta charset="utf-8">
    <title>Windows</title>

    <style type="text/css">

    #wrapper
    {
    width: 1000px;
    margin: 0 auto;
    }

    #master
    {
    position: absolute;
    padding: 0px;
    border: 1px solid #000;
    background-color: #fff;
    width: 1000px;
    height: 3125px;
    top: 10px;
    }

    #header
    {
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    background-color: #fff;
    width: 950px;
    height: 80;
    top: 10px;
    left: 15px;
    }

    #navigation
    {
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    background-color: #fff;
    width: 950px;
    height: auto;
    top: 120px;
    left: 15px;
    }

    #contents-left
    {
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    background-color: #fff;
    width: 460px;
    height: auto;
    top: 175px;
    left:15px;
    }

    #contents-right
    {
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    background-color: #fff;
    width: 460px;
    height: auto;
    top: 175px;
    left:505px;
    }

    #footer
    {
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    background-color: #fff;
    width: 950px;
    height: 100px;
    top: 2790px;
    left: 15px;
    }

    a
    {
    font-family: Trebuchet MS;
    font-size: 1em;
    margin: 1em;
    font-weight: 900;
    text decoration: none
    }

    a:linked, a:visited, a:active
    {
    color: #0000ff;
    }

    a: hover
    {
    color: #c0c0c0;
    }

    .medium
    {
    font-family: Trebuchet MS. Helvetical. Sans-Serif;
    font-size: 1.5em;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    background: #fff;
    color: #000;
    }

    .large
    {
    font-family: Trebuchet MS. Helvetical. Sans-Serif;
    font-size: 2em;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    background: #fff;
    color: #000;
    }

    </style>
    </head>

    <body>

    <div id = "wrapper"><!-- center wrapper -->

    <div id = "master" align="center"><!-- master -->

    <div id = "header" align="left"><!-- header -->

    <div align="center" class="large">Operating Systems</div>

    </div><!-- end header -->

    <div id = "navigation" align="left"><!-- navigation -->

    <a href="../index.htm">Home</a>

    <a href="index_files/MacOS.htm">Mac</a>

    </div><!-- end navigation -->

    <div id="contents-left" align="center"><!-- contents-left -->

    <div align="left">

    <p>Operating system
    From Wikipedia, the free encyclopedia

    <p>An operating system (OS) is an interface between hardware and user which is...


    <p>The introduction of the Intel 80386 CPU chip with 32-bit architecture and paging...

    </div><!-- end contents-left -->

    <div id="contents-right" align="center"><!-- contents-right -->

    <div align="left">

    <p>Windows NT family

    <p>The NT family of Windows systems was fashioned and marketed for higher....
    </div><!-- end contents-right -->

    <div id = "footer" align="left"><!-- footer -->

    </div><!-- end footer -->

    </body>
    </html>

Answer 1

我检查了你的代码，看来你使用了HTML生成器。由于其绝对的地位，它给出了问题。

我已经更新了你的CSS，我希望这会对你有所帮助

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Windows</title>

<style type="text/css">

#wrapper
{
width: 1000px;
margin: 0 auto;
}

#master
{
margin:0px;
padding: 0px;
border: 1px solid #000;
background-color: #fff;
width: 1000px;

}

#header
{
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 950px;
height: 80px;
margin:10px;
}

#navigation
{
float:left;
clear:both;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 950px;
height: 25px;
margin:10px;
}

#contents-left
{
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 460px;
height: 2800px;
float:left;
margin: 10px 0px 10px 10px;
}

#contents-right
{
float:right;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 460px;
height: 2600px;
margin: 10px 10px 10px 0px;
}

#footer
{
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 950px;
height: 100px;
clear:both;
margin: 10px;
}

a
{
font-family: Trebuchet MS;
font-size: 1em;
margin: 1em;
font-weight: 900;
text decoration: none
}

a:linked, a:visited, a:active
{
color: #0000ff;
}

a: hover
{
color: #c0c0c0;
}

.medium
{
font-family: Trebuchet MS. Helvetical. Sans-Serif;
font-size: 1.5em;
font-style: normal;
font-weight: 500;
text-align: left;
background: #fff;
color: #000;
}

.large
{
font-family: Trebuchet MS. Helvetical. Sans-Serif;
font-size: 2em;
font-style: normal;
font-weight: 500;
text-align: left;
background: #fff;
color: #000;
}

</style>
</head>

<body>

<div id = "wrapper"><!-- center wrapper -->

<div id = "master" align="center"><!-- master -->

<div id = "header" align="left"><!-- header -->

<div align="center" class="large">Operating Systems</div>

</div><!-- end header -->

<div id = "navigation" align="left"><!-- navigation -->

<a href="../index.htm">Home</a>

<a href="index_files/MacOS.htm">Mac</a>

</div><!-- end navigation -->

<div id="contents-left" align="center"><!-- contents-left -->

<div align="left">

<p>Operating system
From Wikipedia, the free encyclopedia</p>

<p>An operating system (OS) is an interface between hardware and user which is...</p>


<p>The introduction of the Intel 80386 CPU chip with 32-bit architecture and paging...
</p>
</div>
</div><!-- end contents-left -->

<div id="contents-right" align="center"><!-- contents-right -->

<div align="left">

<p>Windows NT family</p>

<p>The NT family of Windows systems was fashioned and marketed for higher....</p>
</div><!-- end contents-right -->
</div>
<div id = "footer" align="left"><!-- footer -->

</div><!-- end footer -->
</div>
</div>

</body>
</html>

您也可以为

设置height: auto;

#contents-left
{
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 460px;
height: auto;
float:left;
margin: 10px 0px 10px 10px;
}

#contents-right
{
float:right;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 460px;
height: auto;
margin: 10px 10px 10px 0px;
}

Answer 2

实际上，html未对齐的主要原因是没有正确关闭html标签，也没有使用Property：ablosute in CSS。

我修复了html和CSS。 Live Example

代码在这里：

<!DOCTYPE html>
    <html lang="en">

   <!--
    documentation segment
    website: Operating Systems
    web page: Home
    author: Clinton B Scott
    date created: May.2014
    -->

    <head>
    <meta charset="utf-8">
    <title>Windows</title>

    <style type="text/css">

    #wrapper
    {
    width: 1000px;
    margin: 0 auto;
    }

    #master {
        padding: 0px;
        border: 1px solid #000;
        background-color: #fff;
        width: 1000px;
    }
    #header
    {
        padding: 10px;
        border: 1px solid #000;
        background-color: #fff;
        width: 950px;
        height: 80px;
        margin-top: 10px;
    }

    #navigation
    {
        padding: 10px;
        border: 1px solid #000;
        background-color: #fff;
        width: 950px;
        left: 15px;
        margin-top: 10px;   
    }

    #contents-left
    {
        padding: 10px;
        border: 1px solid #000;
        background-color: #fff;
        width: 460px;
        float: left;
        margin: 9px 0px 10px 15px;    
    }

    #contents-right
    {
        padding: 10px;
        border: 1px solid #000;
        background-color: #fff;
        width: 460px;
        float: right;
        margin: 9px 15px 0px 0px;
    }

    #footer
    {
        padding: 10px;
        border: 1px solid #000;
        background-color: #fff;
        width: 950px;
        height: 100px;
        clear: both;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    a
    {
    font-family: Trebuchet MS;
    font-size: 1em;
    margin: 1em;
    font-weight: 900;
    text decoration: none
    }

    a:linked, a:visited, a:active
    {
    color: #0000ff;
    }

    a: hover
    {
    color: #c0c0c0;
    }

    .medium
    {
    font-family: Trebuchet MS. Helvetical. Sans-Serif;
    font-size: 1.5em;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    background: #fff;
    color: #000;
    }

    .large
    {
    font-family: Trebuchet MS. Helvetical. Sans-Serif;
    font-size: 2em;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    background: #fff;
    color: #000;
    }








    </style>
    </head>

    <body>

    <div id = "wrapper"><!-- center wrapper -->

    <div id = "master" align="center"><!-- master -->

    <div id = "header" align="left"><!-- header -->

    <div align="center" class="large">Operating Systems</div>

    </div><!-- end header -->

    <div id = "navigation" align="left"><!-- navigation -->

    <a href="../index.htm">Home</a>

    <a href="index_files/MacOS.htm">Mac</a>

    </div><!-- end navigation -->

    <div id="contents-left" align="center"><!-- contents-left -->

        <div align="left">

            <p>Operating system
                From Wikipedia, the free encyclopedia

            <p>An operating system (OS) is an interface between hardware and user which is...


            <p>The introduction of the Intel 80386 CPU chip with 32-bit architecture and paging...

        </div>
    </div><!-- end contents-left -->

    <div id="contents-right" align="center"><!-- contents-right -->

        <div align="left">

            <p>Windows NT family

            <p>The NT family of Windows systems was fashioned and marketed for higher....

        </div><!-- end contents-right -->

    </div><!-- end footer -->

    <div id = "footer" align="left"></div>

    </body>
    </html>

HTML对齐无法正常工作

2 个答案: