정적 요소 : 절대

나는 다음과 같은 마크 업이 있습니다정적 요소 : 절대

<html> 
<body style="margin:0;padding:0"> 
    <div> 
     <div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div> 
     <div style="border:3px solid blue; width:25%; position: absolute; left:72.5%">Right</div> 
     <div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div> 
    </div> 
</body> 
</html>

내가 여기 달성하기 위해 노력하고 세 가지 div의이 같은 밖으로 누워입니다 : 내 마크 업,

+---------------------------+--------+ 
|Left      |Right | 
+---------------------------+--------+ 
|Bottom        | 
+------------------------------------+

그러나 "하단"div는 "왼쪽"& "하단"것과 겹치고 있습니다.

이 효과를 얻기 위해 어떻게이 세 가지 요소를 스타일링해야합니까?

"하단"은 페이지의 마지막 요소가 아닙니다. 나는 단순히 "왼쪽"과 "오른쪽"이 한 줄에 있고 페이지 흐름이 다음 줄에서 기본 위치를 유지하기를 원합니다.

편집 :

: 정적 높이가 없거나 어떤 이유를 하드 코드하지 않으려면 허용 대답에 추가 ..., 당신은 유사한 효과를 얻을 수 있습니다

<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div> 
<div style="border:3px solid blue; width:25%; margin-left:72.5%">Right</div> 
<div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>

출처

2011-07-05 Konrad Garus

'[the]'bottom 'div가'left '&'bottom '것 위에 겹쳐 있습니다.' ... '하단'div가 중복 ** 자체 **입니까? –

필자는 요소가 절대적으로 배치되었을 때 문서 흐름에서 벗어난다는 것이 문제라고 생각합니다. 따라서 뒤이어 나오는 요소는 그들을 볼 수 없으며, 거기에 있지 않다고 생각하고 뛰어 넘을 수 있습니다. "왼쪽"/ "오른쪽"div 아래에있는 "아래쪽"div를 얻으려면 높이 (또는 비슷한 값)와 동일한 margin-top을 지정해야합니다.

출처

2011-07-05 20:14:56 sdleihssirhc

하지 왜 위치를 사용하고 있는지 확인하십시오 : 당신이 주어진 레이아웃이 필요하면, 당신이 시도 할 수

절대?

<div style="clear:both;"> 
     <div> 
      <div style="border:3px solid red;width:70%;float:left;padding:3px">Left</div> 
      <div style="border:3px solid blue;width:25%;float:left;padding:3px">Right</div> 
     </div> 
     <div style="clear:both;border:3px solid black;width:96%;padding:3px">Bottom</div>  
    </div>

너비가 %로 제어하기 어려울 수 있습니다.

시도해 볼 수 있습니까? 필요한 너비를 조정할 수 있습니다.

일반적으로이 내용을 내 마스터 페이지에 보관합니다. 그렇게하면 모든 하위 페이지가 정상입니다.

<div style="clear:both;width:532px"> 
     <div> 
      <div style="border:3px solid red;width:350px;float:left;padding:5px">Left</div> 
      <div style="border:3px solid blue;width:150px;float:left;padding:5px">Right</div> 
     </div> 
     <div style="clear:both;border:3px solid black;width:516px;padding:5px">Bottom</div>  
    </div>

출처

2011-07-05 20:41:17 kheya

이것은 철학적 인 호언 장담이 될 것입니다. 다른 대답은 구체적인 해결 방법을 제공합니다.이 그림은 더 큰 그림을 봅니다. 나는 최근에이 이슈와 비슷한 이유로 왜 "왜"묻고있다.

CSS는 계단식입니다. 스타일 시트. 그것은 스타일링을하기 위해 디자인되었습니다. 또한 레이아웃도 약간 변경됩니다 (almost).

원하는 효과를 얻으려면 두 가지 방법이 있습니다. 위치와

: 절대 않음는 "좌"를 갖는 것이 가능하다 (see also this techniqueposition: relative 내에 position:absolute 사용) 고정 폭 및 폭의 나머지를 차지 DIV "올바른"를 div에 (또는 둘 다에 대한 비율을 사용 두 div에 너비와 왼쪽을 줘서). 그러나 절대 div가 페이지 흐름 외부에 있기 때문에 하단 div가 제대로 아래로 흐르지 않습니다. 내용의 높이가 고정되어 있으면 고정 높이를 제공 할 수 있습니다. 그렇지 않다면 운이 없으므로 다른 기술을 시도해야합니다.

Projapati의 float + margin 기술을 사용하면 흐름이 좋지만 두 픽셀 중 하나가 고정 된 너비이고 다른 하나는 나머지 컨테이너 너비를 차지하는 것은 불가능합니다. 퍼센트 또는 백분율을 지정할 수 있습니다 두 div의 픽셀 단위이지만 div에 "나머지 부분"을 사용하도록 알릴 방법이 없습니다. 또한 페이지를 매우 좁게 만들면 "오른쪽"div가 다음 줄로 넘어져 div 잠정적으로 서로 옆에있다. 간단히 말해서 두 가지 접근법 모두이 작업을 위해 설계되지 않은 재사용 구조 인 복잡한 해킹이며 둘 다 사람들이 원하는 작업의 제한된 부분 집합을 수행합니다. 비슷한 세부 사항을 묻는 StackOverflow (예 : this one)에는 많은 질문이 있습니다. tar pit의 모든 아이디어는 원하는 CSS 레이아웃을 대략적으로 조정하려고 시도했기 때문에 "왜 그 기술을 사용하지 마라, 당신이 원하는 것을하지 않는다. "그리고"당신은 CSS를 제대로 이해하지 못한다. "

것은, 당신이 원하지 않는 것입니다 float: left. position: absolute을 원하지 않습니다. 그것들은 누구나 손쉽게 스케치하고 이해할 수있는 간단한 레이아웃 인 최후의 수단이며, CSS가 왜 잘 처리되지 않는지 이해하기 어렵습니다. CSS가하는 것과 사람들이 기대하는 것 사이에는 기본적인 불일치가 있습니다. 사실 CSS를 처음 시작할 때 사람들은 CSS를 이해하지 못합니다. 그러나 CSS는 우리의 이익을 위해 지어졌으며 실패했습니다. 결함은 사용자가 아닌 CSS에 있습니다.

원하는 레이아웃은 격자처럼 보입니다. 두 개의 열, 두 개의 행. 콘텐츠를 채우기 위해 높이가 확장됩니다. "왼쪽"은 첫 번째 행과 첫 번째 열에 있으며 너비는 전체 너비의 백분율 또는 고정 너비이며 "오른쪽"은 첫 번째 행과 두 번째 열이며 나머지 너비를 차지합니다. "하단"은 두 열 모두에 걸쳐있는 두 번째 행 내용입니다. 또는 "하단"은 페이지의 바로 뒤에있는 그리드 외부에 있습니다.

격자 레이아웃 as proposed here은 사람들이 페이지 레이아웃에 대해 생각하는 방식에 매우 근접하게 매핑되고 다양한 CSS 해킹이 현재 사용되는 모든 경우를 다루기 때문에 CSS에 필요합니다.

단순히 CSS 그리드를 지정할 수 있습니다. "두 개의 열이있는 격자가 필요합니다. 왼쪽은 100 픽셀을 차지하고 오른쪽은 컨테이너 너비의 나머지 부분을 차지합니다. 높이가 내용을 포함하도록 확장됩니다. 나머지 페이지는 그 아래로 흐른다. " 끝난.

너비의 20 %를 차지하는 왼쪽 열로 변경하거나 오른쪽 열을 수정하거나 높이를 수정하려면 한 줄의 ccs 만 변경하면됩니다. 현재의 기술을 사용하면 현재 사용중인 CSS 해킹의 한계에 도달했을 때 다른 해킹과 함께 처음부터 다시 시작하지만 똑같이 심각한 한계가 있습니다.

IMHO CSS 그리드는 대부분의 사람들이 깨닫는 것보다 더 큰 거래이며, 이 모든 바보 같은 CSS 레이아웃 해커를 만들 것입니다. 마침내 사라집니다.

좋은 소식은 doable in IE10이며이 사이트와 경쟁 할 브라우저입니다. 나쁜 소식은 오랫동안 오랫동안 IE8과 IE9를 지원할 것이라는 것입니다. 내 추측에 따라 until at least 2016.

출처

2012-02-15 21:08:52 Anthony

+1 이것은 받아 들여진 응답이어야합니다 ;-) 절대적으로 위치한 div를 떠 다니는 상대적으로 위치가 지정된 div에 넣는 것은 내가 필요한 것입니다. 고마워, 토니. – Stano

Yahoo YUI CSS Grid builder을 사용하여 이러한 종류의 유연한 열 레이아웃을 생성 할 수 있습니다.

출력물은 손으로 코딩하고자하는 것이 아니며, divs가 5 개의 깊이로 중첩되어 있고 축소되었을 때 6kb 인 YUI CCS 라이브러리를 참조합니다.설명하기 쉽지 만 이것이 손으로 쓰는 것이 쉽지 않은 것은 행복하지 않습니다.

여기 생성 된 html이 있습니다. 이것은 CSS가 없으면 많은 것을 의미하지는 않습니다. float: right<div id="yui-main">에 사용되는 -

<html> 
<head> 
    <title>YUI Base Page</title> 
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
    <style type="text/css"> 
    #custom-doc { width: 100%; min-width: 250px; } 
    </style> 
</head> 
<body class="yui-skin-sam"> 
<div id="custom-doc" class="yui-t1"> 
    <div id="hd" role="banner"><h1>header content</h1></div> 
    <div id="bd" role="main"> 
    <div id="yui-main"> 
    <div class="yui-b"><div class="yui-g"> 
Main content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 
</div> 
    </div> 
    <div class="yui-b">Left bar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> 

    </div> 
    <div id="ft" role="contentinfo"><p>footer content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> 
</div> 
</body> 
</html>

탐색기 현재 크롬과 파이어 폭스에서 인터넷에 마크 업에서 왼쪽 하나가 전에 오른쪽 열에는 오는 9 참고 잘 작동하는 것 같다. :after CSS 규칙을 사용하는 것은 흥미롭고 중요 할 수 있습니다.

출처

2012-03-22 20:42:48 Anthony

정적 요소 : 절대

답변

관련 문제