웹 페이지 레이아웃

페이지를 만들었지 만 일부 레이아웃과 관련된 문제를 만났습니다. div (최대 높이)를 자동으로 작성할 수 없습니다. 그 아래에 표시되지 않습니다웹 페이지 레이아웃

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
     <title>Link one</title> 

     <style type="text/css"> 
      div#middle{ 
       margin-top: 5px; 
       margin-bottom: 5px; 
      } 
     </style> 
    </head> 

    <body> 
     <div style="background-color: gray;border: solid 1px red" id="top"> 
      <h1>Top<h1> 
     </div> 

     <div style="border: solid 1px blue;min-height: 200px" id="middle"> 
      <div id="leftmenu" style="float: left;background-color:gray;width: 190px"> 
       <ul> 
        <li><a href=''>Link One</a></li> 
        <li><a href=''>Link Two</a></li> 
       <ul> 
      </div> 

      <div id="content" style="background-color: black;margin-left: 200px"> 
       I am in Link One 
      </div> 
     </div> 

     <div style="background-color: gray" id="foot"> 
      <hr/> 
      <p>Copyright xxx</p> 
     </div> 
    </body> 
</html>

참고 ID입니다 "중간"내가 수동으로 높이를 설정해야합니다 사업부, 그렇지 않으면 그것은 (ID가 "발"와 DIV) 아래 사업부 : 다음과 같은 마크 업을 참조하십시오. foot div는 "middle"div와 같은 줄로 이동합니다. 테스트를 위해 "min-height : 200px"div를 제거하십시오.

콘텐츠가 확실하지 않으므로 수동으로 크기를 설정할 수 없기 때문에 가운데 div의 높이를 "leftmenu"또는 "content"의 더 큰 높이로 지정하고 싶습니다.

아이디어가 있으십니까?

----------------------------------------- alt text

확장되지 않습니다.

출처

2011-01-07 hguser

나는 실험적인 이유로 그런 것 같지만 인라인 CSS는 제거하고 별도의 파일에 배치해야합니다. – markus

당신은 당신의 수레를 삭제하지 않습니다. 내용

<div style="border: solid 1px blue;min-height: 200px" id="middle"> 
      <div id="leftmenu" style="float: left;background-color:gray;width: 190px"> 
       <ul> 
        <li><a href=''>Link One</a></li> 
        <li><a href=''>Link Two</a></li> 
       <ul> 
      </div> 

      <div id="content" style="background-color: black;margin-left: 200px"> 
       I am in Link One 
      </div> 
      <div style="clear:both;"></div> 
     </div>

이 때문에 페이지의 흐름이 작업을 수행 = ID로 사업부 아래에이 줄 <div style="clear:both;"></div>을 추가합니다. 흐름은 페이지의 요소 순서입니다. 따라서 귀하의 예에서는 귀하의 li 요소가 차례로 배치되므로 첫 번째 요소는 페이지의 두 번째 요소 앞에 나타납니다. 모든 요소에 동일하게 적용됩니다 (<a>, <div>, <p>, <img>). 요소가 떠 다니는 경우 흐름에서 꺼내고 그 뒤의 요소는 그 옆에 밀어 넣습니다. 이 방법을 사용하면 텍스트를 이미지 나 링크가 서로 나란히 늘어서도록 할 수 있습니다. 당신은 부모 요소 (#middle) (당신이 #leftmenu 및 #content와 함께했던 것처럼) 다른 요소 내의 모든 요소를 떠 역할을 할 때 그것 인 것처럼 작용하는 흐름의 자식 요소가없고 때문에

불행하게도 그것은 아무것도 포함하지 않는 것처럼 본질적으로 비어있다. 반제 <div>을 추가함으로써 다른 모든 요소 바로 아래의 흐름에 자식 요소를 생성하므로 부모 요소는 올바른 높이를 계산할 수 있습니다.

내가 충분히 설명했으면 좋겠다.

출처

2011-01-07 14:02:30

좋습니다! 이제 작동합니다. 자세한 내용을 알려주시겠습니까? 왜 그런지 알고 싶습니까? – hguser

나는 나의 대답을 편집하고 설명하기 위해 편집했습니다 –

예, 지금은 분명히 있습니다. 그렇다면 부유물의 스타일은 엘리먼트를 부모 엘레 멘 (elemetn)조차도 날아 가게 할 것입니까? 이후 나는 "leftmenu"div를 떠 다니기 전에 div "middle"에 여전히 포함되어 있고 "middle"div는 떠 다니지 않습니다. 페이지의 정상적인 흐름 내에 있습니다. 동일합니다. "발"div로, 그래서 세 divs (상단, 중간, 상단) 하나씩 차례로 넣어 야합니다 .... – hguser

동일한 열 높이를 가짜로 사용하려면 배경 이미지를 사용하십시오.

확인이 문서 : 사용이 클래스를 지우는

http://www.alistapart.com/articles/fauxcolumns/

이

<div style="border: solid 1px blue;min-height: 200px" id="middle" class="clearfix">

출처

2011-01-07 13:49:13 Diablo

float:left 같은

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
}

이 문제를 일으키는 것입니다. 중간에 반제 요소를 삽입해야합니다.

예를 들어

<div style="border: solid 1px blue;min-height: 200px" id="middle"> 
     <div id="leftmenu" style="float: left;background-color:gray;width: 190px"> 
      <ul> 
       <li><a href=''>Link One</a></li> 
       <li><a href=''>Link Two</a></li> 
      <ul> 
     </div> 

     <div id="content" style="background-color: black;margin-left: 200px"> 
      I am in Link One 
     </div> 
     <div style="clear:both"></div> 
    </div>

JS Fiddle demo

출처

2011-01-07 14:00:06

감사합니다. 귀하의 답변은 Matt Asbury 's와 동일합니다. IT가 작동합니다. – hguser

@hguser 아 그래,하지만 나는 그를 때려 : –

@hguser 거기에 div를 오버레이하는 사이드 메뉴 모음에 대한 즉,이 동작을 실제로 원하는 경우가 있습니다. –

웹 페이지 레이아웃

답변

관련 문제