ID 양식이있는 DIV가 인접한 DIV 아래로 떨어지는 이유는 무엇입니까?

-3

내 레이아웃에 div form의 위치를 올바르게 지정할 수 없습니다.ID 양식이있는 DIV가 인접한 DIV 아래로 떨어지는 이유는 무엇입니까?

아래에서 내 div 배치 및 CSS를 보면 누군가가 내가 잘못하고있는 아이디어를 가지고 있습니까?

<div id="wrapper"> 
    <div id="logo"></div> 
    <div id="topnav"></div> 
    <div id="nav"> 
    <ul> 
     <li><a href="#">link</a></li> 
     <li><a href="#">link2</a></li> 
     <li><a href="#">link3</a></li> 
     <li id="last"><a href="#">link4</a></li> 
    </ul> 
    </div> 
    <div id="gallery"></div> 
    <div id="floorplans"></div> 
    <div id="development"></div> 
    <div id="projects"></div> 
    <div id="form"><div> 
    </div> 

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

당신은 form이 아래로 떨어지고있다 사업부를 알 수 있습니다. 일들을 맞추기 위해 무엇을해야합니까? div의 위치를 다시 고쳐야합니까?

레이아웃의 CSS는 (I 만 영향을받는 div의에 대한 코드가 포함되어있다)이다 : 당신은 두 블록 (평면도 및 개발 정보)를 가지고 있기 때문에

<style type="text/css"> 
#floorplans { 
    float: left; 
    height: 165px; 
    width: 203px; 
    border-right: 1px solid #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    position: relative; 
    background: #FFFFFF url(images/floorplans.jpg) no-repeat; 
    padding-top: 14px; 
    padding-left: 20px; 
    display: block; 
    color: #000000; 
    line-height: 1.5em; 
    padding-right: 10px; 
} 
#development { 
    float: left; 
    height: 165px; 
    width: 204px; 
    border-right: 1px solid #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    position: relative; 
    background: #FFFFFF url(images/development.jpg) no-repeat; 
    padding-top: 14px; 
    padding-left: 20px; 
    display: block; 
    color: #000000; 
    line-height: 1.5em; 
    padding-right: 10px; 
} 
#projects { 
    background: #FFFFFF url(images/projects.jpg) no-repeat; 
    height: 127px; 
    width: 153px; 
    text-align: left; 
    padding-left: 300px; 
    color: #333333; 
    padding-top: 25px; 
    display: block; 
    float: left; 
    position: relative; 
    line-height: 1.5em; 
    font-size: 10px; 
    padding-right: 15px; 
    clear: left; 
} 
#form { 
    background: #990000 url(images/form.jpg) no-repeat; 
    float: left; 
    height: 309px; 
    width: 450px; 
    position: relative; 
    padding-top: 20px; 
    padding-left: 30px; 
    padding-right: 30px; 
    color: #FFFFFF; 
} 
</style>

출처

2008-10-21 Diventare Creative

문제는 여기에 무엇입니까? –

Nathan과 동의 해주세요. 실제 질문을 할 수 있습니까? 나머지 SO 커뮤니티는이 혜택을 누릴 수 있습니까? –

질문 : "왜 DIV가 인접한 DIV 아래로 떨어지는 ID 양식을 가진 DIV입니까?" – AaronSieb

양식 div의 상단은 앞에있는 div의 상단과 일치합니다. clear:left;이 #projects 인 경우 #projects은 다음 내용 (좋음)과 함께 다음 내용 (나쁜)으로 이동합니다. 부정적인 상단 여백을 사용하거나 #form을 #projects 앞에 넣으려면 HTML을 재구성하는 것이 좋습니다.

다음과 같은 일을해야 추가 :

#form { 
    margin-top:-180px; 
} 
#projects { 
    border-right: 1px solid #FFFFFF; 
}

출처

2008-10-21 18:51:29

을 테두리 각, 그들은 너무 지금이야 폼 블록 옆에 앉을 수 있습니다. 하나 또는 두 개의 테두리를 제거하고 양식이 다시 팝업되는지 확인하여이를 테스트하십시오.

참고 : 음수 여백은 종종 IE6에서 문제가 있으므로 유의하고 이에 대한 해결책을 확인하십시오.

출처

2008-10-21 18:47:36

ID 양식이있는 DIV가 인접한 DIV 아래로 떨어지는 이유는 무엇입니까?

답변

관련 문제