HTML 정렬이 제대로 작동하지 않습니다.

웹 개발 과정에있는 프로젝트 용입니다. 우리는 수업을위한 교과서와 교사가 예를 들어 넣은 한 비디오를 최종 결과가 어떻게 보이는지 함께 보여줍니다. 이 프로젝트는 헤더, 두 개의 열 및 바닥 글을 div 형식 테이블에 포함시켜야합니다. 그러나 우리는 테이블 함수를 사용하여 HTML에서 매우 특정한 프로그래밍을 할 수는 없습니다.HTML 정렬이 제대로 작동하지 않습니다.

그래서 div 정렬 테이블에 텍스트를 추가 한 후 정렬이 완전히 잘못되었거나 텍스트가없는 완벽한 정렬로 정렬되지 않았습니다. e 페이지의 높이가 텍스트와 다르게 설정되었지만 아래 프로그래밍을 제공했습니다. 텍스트는 중요하지만 금액이 확실하지 않습니다.

제 질문은 프로젝트에 텍스트를 추가 한 후 어떻게 내 머리글과 정렬되도록 열과 바닥 글을 가져올 수 있습니까? 마스터 프레임의 맨 아래에이 성가신 헤더를 추가해야합니다.이 프레임은 현재로서는 아무 것도 붙이지 않는 것 같습니다.

내가 바닥 글 이제 헤더 뒤에 마스터 프레임을 편집 한 후 게재의 문제가 있었다 몇몇 끝 태그를 완료, 지금은 나의 상자 콘텐츠에 라인 (로 나타 참고

:. MUST 순위를 유지 : 절대 난 당신의 코드를 검사 한이 프로젝트

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

출처

2014-06-07 Clinton Scott

를 들어,이에 대한 HTML 생성기를 사용하는 것 그것의 제공 문제를 인해 절대 위치로 나는 당신의 CSS를 업데이트 한

, 나는.. 희망이있다. ablosute을 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>

도움이 될 것 또한 사실 HTML의 unalignment의 주요 이유는 제대로 html 태그를 닫고 또한 재산권의 사용하지 않는 것입니다

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

출처

2014-06-07 07:01:50 Sharanpreet

불행하게도이 프로젝트는 우리가 쉽게 할 수 있습니다 알고 끝이 날 실망 절대 위치를 사용하려고합니다. –

절대 위치를 사용할 수 있습니다. Css 코드는 괜찮습니다. 그냥 문제가 끝 태그와 함께입니다. 일부 태그가 제대로 닫히지 않기 때문에 맞춤이 적절하지 않은 것입니다. 원치 않는 공백을 제거하기 위해 CSS 옆에있는 "상단"값을 줄일 수 있습니다. 도움이되기를 바랍니다. – Sharanpreet

에 대한 height: auto;을 설정할 수 있습니다.

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

출처

2014-06-07 07:44:46 InventorX

나는 지시 사항을 실제로 읽었고 나는 절대 위치를 지켜야한다. –

내 문서를 잠시 살펴본 후 범죄자 결말 태그를 발견했습니다. 심지어 일부는 세미 콜론이 누락되었습니다. 이것을 지적 해 주셔서 감사합니다. –

HTML 정렬이 제대로 작동하지 않습니다.

답변

관련 문제