2012-04-07 5 views
0

나는 div가 하나 있는데, 그 안에 div가 두 개 포함되어 있습니다. 아래 소스 코드를 포함하고 있습니다. Firefox에서 축소하면 divs 두 번째 div에서 chrome이 첫 번째 div 아래에 서 있습니다. 어떻게 CSS를 작성하여 해당 위치에 머물러야합니까?CSS div 스타일링

<div id="container"> 
    <div id="id1"></div> 
    <div id="id2"></div> 
</div> 

있는 style.css는 축소하면 화면에 요소의 크기를 감소 때문이다

#container { 
    width: 646px; 
    height: auto; 
    margin:0 auto; 
    padding:0; 
} 

#id1 { 
    float: left; 
    width: 315px; 
    height: 115px; 
    border-top: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    border-bottom: 1px solid #999; 
    border-right: 1px solid #999; 
    box-shadow: 0 1px 1px #cccccc; 
} 

#id2 { 
    float: left; 
    width: 314px; 
    height: 115px; 
    border-top: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    border-bottom: 1px solid #999; 
    border-right: 1px solid #999; 
    box-shadow: 0 1px 1px #cccccc; 
    margin-left:13px; 
} 
+2

'# container' 너비를 늘려야합니다. – noob

+0

너비를 늘리는 이유는 다음과 같습니다. #container 너비는 646px, #id 너비는 315px, 오른쪽과 왼쪽 테두리는 2px, 너비는 314px 오른쪽과 왼쪽은 2px, 왼쪽은 13px이므로 요약 해 봅니다. 315px + 2px + 314px + 2px + 13px = 646px, 맞습니까? 또는 다른 것을 놓치고 있습니까? – orif

+0

제발 @micha 내 별명을 올바르게 작성, Dubalizer 아니라 Drupalizer 괜찮아? – orif

답변

2

입니다. 그러나 국경이 너무 작기 때문에 국경이 더 이상 작아지지 않으므로 그대로 유지됩니다.

너가 진짜로 고치고 싶은 경우에 너는 #container의 폭을 약 652px에 증가해야한다.

+1

감사합니다. 정말 의미가 있습니다. – orif