CSS 레이아웃 디자인 문제

디자인을 만들었지 만 필요한 방식으로 작동하도록 문제가 있습니다. 여기에 완전한 팩을 게시하는 것은 너무 어려울 것이지만 여기에 짧은 문제가 있습니다. DIV 요소가 다른 DIV 요소와 나란히 있습니다. 하나는 사이드 바이고 다른 하나는 콘텐츠입니다. 콘텐츠 세트에 fieldset을 넣을 때, 내부에 넣은 항목 (다른 div와 마찬가지로)은 fieldset을 확장하고 div를 올바르게 캡슐화합니다. 그러나 fieldset을 제거하면 "guest divs"는 캡슐화 된 "content div"를 늘리지 않습니다. 그 이유는 무엇이며 어떻게 해결할 수 있습니까?CSS 레이아웃 디자인 문제

감사합니다.

자세한 정보가 필요하면 문의하십시오.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<style type="text/css"> 

#main-container 
{ 
    background-color:gray; 
} 
#header-container 
{ 
    background-color:green; 
    height: 60px; 
} 
#sidebar-container 
{ 
    background-color:maroon; 
    width: 150px; 
    float: left; 
} 
#content-body 
{ 
    background-color:white; 
    position: relative; 
} 
#block-1, #block-2 
{ 
    float:left; 
    width: 50%; 
    background-color: blue; 
    height: 95px; 
} 
#block-3 
{ 
    float: left; 
    width: 100%; 
    background-color:navy; 
    height: 156px; 
} 
#footer 
{ 
    width: 100%; 
    background-color:orange; 
} 

</style> 
</head> 

<body> 
    <div id="main-container"> 
     <div id="header-container"></div> 
     <div id="sidebar-container"><ul><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li></ul></div> 
     <div id="content-body"> 
      <div id="block-1">&nbsp;</div> 
      <div id="block-2">&nbsp;</div> 
      <div id="block-3">&nbsp;</div> 
     </div> 
     <div id="footer">&nbsp;</div> 
    </div> 
</body> 

</html>

출처

2009-08-29 BuzzBubba

은 문제가 무엇인지에 관한 추측. 게시하기에 너무 많은 경우 페이지/코드에 연결할 수 있습니까? 문제가있는 중요한 요소를 게시 할 수 있습니까? –

예가 있습니까? 너는 평등하지 않은 칼럼 높이를 말하는거야? –

필드 집합의 너비를 백분율이 아닌 픽셀 너비로 제한하려 했습니까? –

당신은 오버플로 설정해야합니다 : 당신의 포함 사업부에 숨겨진, 그리고 유체 적어도 하나의 차원이 있는지 확인

코드는이 라인을 따라 뭔가입니다. 기본적으로 오버플로 요소 (즉, 플로팅 요소, 일반 문서 흐름에서 가져온 모든 항목)는 상위 컨테이너에 영향을주지 않고 '포함 블록 경계를 오버플로'(오버플로 : 표시)됩니다. 오버플로를 숨김으로 설정하면 고정 된 크기로 설정되지 않은 모든 차원에서 포함 된 div를 확장하여 해당 내용 요소가 완전히 포함되도록 상자 모델에 알립니다.

포함 된 div의 내용이 스크롤해야하는지 여부에 따라 overflow : auto 또는 overflow : scroll을 사용할 수 있습니다. 자동 설정은 필요한 경우 스크롤바를 표시하고 스크롤은 항상 스크롤바를 표시합니다. CSS3 오버 플로우를 지원하는 브라우저는 W3C.org에서 찾아 볼 수있는 추가 기능을 제공합니다.

#content-body 
{ 
    background-color:white; 
    position: relative; 
    overflow: hidden; 
}

요즘 선호하는 다른 방법은 아래 링크에서 찾을 수 있습니다 : 난 당신의 코드를 만들 것

첫 번째 변화는 다음과 같다. 나는 그것을 직접 사용하지 않았기 때문에, 방법이 얼마나 호화로운지를 권위있게 말할 수는 없다. 그러나 현대적인 브라우저 (Opera, FF 3.x, Safari, Chrome, IE8)의 오버플로 수정보다 선호되는 것으로 보입니다. 이전 버전의 IE에서는 자동으로 div가 자동으로 확장되므로 설정이 자동으로 확장됩니다. 당신이 될 것 몇 가지 대표적인 코드를 게시 할 수 있습니다하지 않는 한

http://www.positioniseverything.net/easyclearing.html

출처

2009-09-01 06:39:30 jrista

마지막 링크가 내 문제를 가장 잘 해결했습니다. 고맙습니다. – BuzzBubba

CSS 레이아웃 디자인 문제

답변

관련 문제