2011-02-02 3 views
3

서로의 아래에 절대 위치 요소를 정렬 할 수 있습니까?

나는이 div가있다 :

<div class="member"> 
    <div class="memberImage"><img src="" /></div> 
    <div class="memberInfo">John Doe</div> 
</div> 

이것은 이것을위한 CSS이다 :

.member { 
    width:200px; 
    clear:both; 
    position:absolute; 
    padding:5px; 
} 

이 div 바로 아래에이 position:absolute 때문에 다른 것보다 하나의 것처럼 보인다.

position:absolute을 유지하고 다른 하나를 정상보다 아래에 둘 수 있습니까?

고마워요,

+0

'절대'는 부모에 대한 상대적인 위치를 의미하기 때문에 'top', 'right', 'bottom'또는 'left'속성을 사용하여 요소의 위치를 ​​설정할 수 있습니다. – 0x2D9A3

+1

플로팅 요소에 'clear'가 사용되므로 여기서는 쓸모가 없습니다. 왜이 부서가 절대 위치에 있어야하는지 설명해 주시겠습니까? 왜 떠 다니거나 친척이 아니겠습니까? – Shikiryu

+0

절대 위치에 있어야 할 필요는 없지만 절대 위치에있을 때 수행 할 수 있는지 알고 싶습니다. –

답변

3

IT는 위치를 유지할 수 있습니까?

간단한 대답 : 없는.

가능한 해결책 :

(이 경우에는 아마 현명한) 절대 위치를 사용하지 마십시오 모든 회원의 회원 등급 및 증가에 top 속성을 추가

코드 스 니펫에서 판단하여 회원 목록을 만들고 싶습니다. 따라서,

.memberlist li { 
    width: 200px; 
    padding: 5px; 
    margin-bottom: 10px; 
} 
0

그것의 당신이 클래스 이름을 사용했기 때문에 :

<ul class="memberlist"> 
    <li> 
     <div class="memberImage"><img src="foo.jpg" /></div> 
     <div class="memberInfo">John Doe</div> 
    </li> 
    <li> 
     <div class="memberImage"><img src="foo.jpg" /></div> 
     <div class="memberInfo">John Doe</div> 
    </li> 
    <li> 
     <div class="memberImage"><img src="foo.jpg" /></div> 
     <div class="memberInfo">John Doe</div> 
    </li> 
</ul> 

그리고 그것과 함께 갈 수있는 해당 CSS :이 잘 맞는 것 간단한 패턴은 UL (순서없는 목록) 단순히 같은 모두 스타일, 그래서 둘 다, 당신도 위치 그들에게 ID를 제공하거나 사용할 수있는 절대 위치가 : 상대

1

이 가능하다 position:absolute을 유지하고 규범과 같은 다른 아래 하나를 가질 수를 알았지?

글쎄, 아니야, 왜냐하면 position:absolute은 요소의 절대 위치를 지정할 수 있도록 설계 되었기 때문입니다.

이 그것을 절대적에 위치 할 때 그 요소의 왼쪽 상단에 기본 것이며, (당신이 원하는 경우 또는 bottomright) topleft 속성을 사용하여 요구 사항에 따라 배치 할 수 있다는 것을 의미한다.

top 두 개의 요소를 지정하여 두 개의 요소가 서로 아래에 나타날 수 있으므로 질문에 답할 수 있지만 실제로 묻는 것은 절대 위치 지정이 아니므로 position:absolute은 부적절합니다.

대체로 위치가 지정된 요소와 비슷하지만, topleft 등을 사용하여 무시할 수 있다는 점을 제외하고는 더 많이 작동합니다. 원하는 작업을 수행 할 수 있으므로 답변이 들리 겠지만 귀하의 질문에.

희망이 있습니다.

관련 문제