2012-07-13 8 views
5

내 HTML 페이지에서 컨테이너 div 안에 두 div가 있습니다. 두 개의 내부 div에는 '위치 : aboslute'가 있습니다. 그들은 컨테이너 div의 왼쪽 하단 모서리에 배치해야한다.절대 divs가 서로 옆에

이것은 컨테이너 div에 하나의 내부 div 만있는 경우에 효과적입니다. 하지만 두 번째 div를 추가하면 두 번째 div가 첫 번째 내부 div의 꼭대기에 배치됩니다. 어느 것이 당연한가. 그러나 지금 나는 그들을 서로 겹치게하는 대신 서로의 옆에있게하는 방법을 찾으려고 노력하고있다.

내부 div가 생성됩니다. 그래서 나는 그들에게 ID를 수동으로 추가 할 수 없다. 그들이 가지고있는 것은 하나의 클래스 이름입니다.

Example :

<div id="container"> 
    <div class="icon">ICON1</div> 
    <div class="icon">ICON2</div> 
</div> 
#container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
} 

.icon { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border: 1px solid green; 
} 

사람은 어떻게이 문제를 해결하는 어떤 생각을 가지고?

+0

당신은 그것들을 상대 위치로 만들 수 있기 때문에 부모 (컨테이너) 요소에 상대적인 레이아웃을 유지하게됩니다. – jeschafe

+0

'div'요소와 반대로 'li'에 각 ICON을 배치하는 것은 어떻습니까? 스타일리스트 항목은 매우 유연하고 간단합니다! – Liggy

+0

그냥 첫 번째 자식/마지막 자식을 사용하여 내 대답을 참조하십시오 – Huangism

답변

6

대신 각 아이콘의 래퍼 요소의 절대 위치를 사용하여, 당신은 부유하거나 해당 컨테이너 내에서 같은 방법 아이콘의 위치를 ​​지정할 수 있습니다 :

<div id="container"> 
    <div class="icon-wrapper"> 
     <div class="icon">ICON1</div> 
     <div class="icon">ICON2</div> 
    </div> 
</div> 
#container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
} 
.icon { 
    border: 1px solid green; 
    float:left; 
} 
.icon-wrapper { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

데모 : http://jsfiddle.net/sYGfq/3/

0

2 개만 사용할 수 있습니다 : css에서 first-child 또는 : last-child, 추가 html을 추가 할 필요가 없습니다. CSS의 몇 줄은 테이블에 별도의 세포로 된 div를 모두 넣고 마지막 자식

.icon:last-child { 
    left: 200px; 
    border: 1px solid green; 
} 
+0

고마워,하지만 난 마지막 아이 IE7 (확실하지 IE8)에서 지원되지 않습니다 생각합니다. – w00

+0

그 다음 첫 번째 자식을 사용합니다. 그 중 하나가 지원됩니다. IE 7의 http://jsfiddle.net/sYGfq/8/을 참조하십시오. – Huangism

+0

@Huangism IE에서 컨테이너 중 하나가 떨어져서 확인 했습니까? 게다가, 당신이 3 개 이상의 아이콘을 가지고있을 때 '첫 아이'는 무슨 일을합니까? – Vivendi

0

여기

예를 들어 그것을 http://jsfiddle.net/sYGfq/6/

CSS를 돌볼에서 모든 테두리와 패딩을 제거합니다 테이블과 부모 div의 하단 왼쪽 모서리에 절대적으로 그것을 배치합니다.

<div id="container"> 
<table class="none" id="table1"> 
<tr class="none"> 
<td class="none"> 
<div class="icon">ICON1</div> 
</td> 
<td class="none"> 
<div class="icon">ICON2</div> 
</td> 
</tr> 
</table> 
</div> 

#container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
} 

.icon { 
    border: 1px solid green; 
} 

.none { 
    border: 0; 
    padding: 0; 
} 

#table1 { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

프레스토!

관련 문제