이전 div 이후에 div가 시작되지 않는 이유는 무엇입니까?

Question

WordPress 테마의 머리글 부분을 수정하고 다른 div 내에 몇 개의 div를 중첩 시키려고합니다. 나는 HTML/CSS에 대해서는 경험이별로 없지만, 내가 관찰 한 것은 나에게 이상한 것 같다.

<div class="extras"> 
    <div id="search"> 
     <form role="search" method="get" id="searchform" action="http://mentatescholars.com/" > 
      <input type="search" placeholder="Search" value="" name="s" id="s" /> 
      <input type="submit" id="searchsubmit" value="Search" /> 
     </form> 
    </div><!-- end #search --> 
    <div class="phone-number"> 
     <div class="phone-number-main">1-885-MENTATE</div> 
     <div class="phone-number-sub">1-885-636-8283</div> 
    </div> 
</div> 

을 그리고 그림에서 나는 파이어 폭스의 관리자로 선택한 phone-number 사업부는 (extras를 선택하면 같은 모양)이 있습니다

내 코드는 다음과 같습니다. 이상하게 여기는 이유는 그것이 extras div의 최상위에서 시작하고 search div가 아닌 것에서 시작하는 이유입니다. search도 높이가 40px입니다. 나는 세 번째 DIV를 선택하면

는, 다음은 이전 DIV 직후부터 사업부를 보여줍니다. 또한 저와 같은 홀수 파업 무엇

는 phone-number-main 사업부의 상단이 extras과 같은 높이 동안, 텍스트 날 아무것도하지 않고 완벽하게 아래로 이동하는 방법입니다.

제 질문은 phone-number div가 search div 바로 다음에 시작되도록하려면 어떻게해야합니까?

여기를 보시려면 여기를 클릭하십시오 : http://mentatescholars.com/.

Answer 1

#search은 부동이고 .phone-number은 부동입니다. .phone-number<div />에 clear:both을 추가하면 올바른 레이아웃이 표시됩니다.

float은 문서 흐름에서 요소를 제거합니다. 자세한 내용을 보려면이 링크를 확인하십시오. http://www.alistapart.com/articles/css-floats-101/

Answer 2

높이를 줄임으로써 #search 블록을 더 작게 만들 수 있습니다 (예 : 30px).

Answer 3

이는 요소가 플로팅되어 있기 때문입니다. 귀하의 "검색"div가 떠 있고 명확하지 않습니다. phone-number 요소의 CSS에 clear:both을 사용하면 정상적으로 작동합니다.

search 바로 뒤에 번호를 넣으려면 높이 search을 30px로 만들고 제출 버튼의 여백 하단을 제거하십시오.