너비가 100 %가되는 두 개의 div가 서로 아래에 나타납니다.

페이지 폭의 50 %에 가운데에있는 컨테이너 div가 있습니다. 이것은 10px 패딩과 상대적 위치를가집니다. 그런 다음 div 내부에 너비 80 %로 설정되고 왼쪽으로 떠서 다른 색상으로되어 있고 10px의 패딩이 있습니다. 폭이 20 % 인 다른 div 세트가 오른쪽으로 떠 있습니다. 중첩 된 div에는 테두리 나 여백이 없습니다. 그러나 오른쪽 화면은 다른 화면 아래에 표시됩니다. 특정 화면 크기까지. 내가 어떤 도움이 사람이 저를 줄 수있는 감사하겠습니다 있도록너비가 100 %가되는 두 개의 div가 서로 아래에 나타납니다.

<html> 
    <head> 
     CSS file included here 
    </head> 
    <body> 
     <div class="page-container"> 
      <div class="right-col"></div> 
      <div class="left-col"></div> 
      <div class="clear"></div> 
     </div> 
    </body> 
</html> 


.page-container { 
    width: 50%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.left-col { 
    width: 80%; 
    float: left; 
} 

.right-col { 
    width: 20%; 
    float: right; 
} 

.clear { 
    clear: both; 
}

이이 연령대에 나를 귀찮게되어 다음과 같이

내 HTML/CSS입니다. 미리 감사드립니다.

감사합니다,

리처드

출처

2010-11-24 ClarkeyBoy

아마도 반올림 오류 일 수 있습니다. 나는 너비의 100 %를 전혀 사용하지 않을 것이고, 너비를 가로 : 79 %로 변경해보십시오. – xandy

약 1 시간 전에 이것을 시도했습니다. 왼쪽 열을 77 %까지, 다른 하나는 17 %로 떨어 뜨렸다 고 생각합니다. 어딘가에 여백이있는 것처럼 들리지만, 여백을 0으로 설정해 보았습니다. 아무 소용이 없습니다. 77/17 %의 것을 사용하는 것은 또한 같은 결과를 얻는 특정 크기로만 작동합니다. – ClarkeyBoy

Firebug로 검사하면 여백 또는 패딩을 포함하여 각 div의 상자 모델을 볼 수 있습니다. 그 시점에서 어떤 일이 일어나는지 분명해야합니다. –

예제에는 패딩이 포함되어 있지 않으며 모든 화면 크기에서 동일하게 보입니다. 왼쪽 div에 패딩을 추가하면 너비가 80 % + 20px가되도록 전체 너비에 더해집니다. 왼쪽 div의 콘텐츠에 약간의 패딩이 필요한 경우 10px 여백으로 다른 div를 추가합니다.

<div class="page-container"> 
     <div class="right-col"></div> 
     <div class="left-col"> 
      <div class="left-col-inner"></div> 
     </div> 
     <div class="clear"></div> 
    </div>

CSS

.left-col-inner{ 
margin:10px; 
}

출처

2010-11-24 04:39:48 Michael

나는 이것이 이것일지도 모른다라고 생각한다. 감사. 다음에이 작업을 수행 할 때 결과를 알려줍니다. – ClarkeyBoy

네, 맞습니다. 방금 해보니 효과가있었습니다. 감사 – ClarkeyBoy

거의 100 % 폭, 예를 들어 19.99 % 나 79.99 %를 지정하십시오.

출처

2010-11-24 04:08:25

그것은 xandy가 제안했습니다. 그것은 일을하지 못했다. – ClarkeyBoy

마이클은있다.

다른 div를 div.left-col 내부에 삽입하지 않으려면 직접 연결된 모든 자식에게 여백 또는 패딩을 줄 수 있습니다.

div.left-col > * { 
    margin-left: 10px; 
    margin-right: 10px; 
}

출처

2010-11-24 08:10:57

너비가 100 %가되는 두 개의 div가 서로 아래에 나타납니다.

답변

관련 문제