약간의 CSS 혼란과 문제가 있습니다.

몇 가지 문제점을 일으키는 코드가 있습니다. 왼쪽, 오른쪽 및 가운데 창으로 기본 div를 만드는 것으로되어 있습니다. 왼쪽 창은로드시 잘 작동하지만 동일한 CSS 스타일을 유지하는 오른쪽 창은 축소 된 여백을 가진 자식을 표시합니다. 내 첫 번째 질문은 왜 마진 탑이 오른쪽 창에서 아이들을 위해 일하지 않는 이유입니까?약간의 CSS 혼란과 문제가 있습니다.

편집 : 오른쪽 창의 CSS에padding-top: 0.5px을 사용하여이 문제를 해결했습니다.

그리고 나는 .picHolderSide 클래스의 스타일이 내가 절대 위치 요소가에 관련 위치 것이라는 점을 알고 있기 때문에 내가 기대하지 않았다 몇 가지 문제가 발생 position: absolute; top: 0; left: 0; 를 포함 붕괴 마진에 대해 조금 읽고하기로 결정 다음에 위치하는 부모는이 경우 오른쪽 창입니다. 내 다음 질문은 누군가가 내가 한 일을 반복해서 설명하기가 어렵 기 때문에 왜 그 일을했는지 말해 주려고하는 것입니다.

그리고 나서 마침내 나는 또 다른 문제에 부딪혔다. 문제는 스택 오버플로가되게했다. .picHolderSide 클래스의 width 특성을 100% 대신 140px으로 변경하여 오른쪽 창의 자식을 왼쪽 창의 자식과 완벽하게 겹치게 만듭니다. 나는 이것에 대해 내가 무엇을 잘못하고 있는지 확신하지 못한다. 그러나 누군가이 3 가지 질문에 나를 도울 수 있다면 감사 할 것이다. 미리 감사드립니다. 귀하의 #rightDivider

<html> 
    <head> 
     <style type = "text/css" rel = "stylesheet"> 
      #photoSliderContainer{ 
       height: 500px; 
       width: 700px; 
       background-color: black; 
       position: relative; 
       left: 0; 
       top: 0; 
      } 
      #leftDivider{ 
       background-color: rgb(50, 50, 50); 
       height: 100%; 
       width: 20%; 
       position: absolute; 
       left: 0; 
       top: 0; 
      } 
      #rightDivider{ 
       background-color: rgb(60, 60, 60); 
       height: 100%; 
       width: 20%: 
       position: absolute; 
       left: 80%; 
       top: 0; 
      } 
      #centerDivider{ 
       height: 100%; 
       width: 60%; 
       background-color: rgb(70, 70, 70); 
       position: absolute; 
       left: 20%; 
       top: 0; 
      } 
      #bottomDivider{ 
       position: absolute; 
       background-color: rgb(80, 80, 80); 
       height: 20%; 
       width: 100%; 
       top: 80%; 
       left: 0; 
      } 
      .picHolderSide{ 
       height: 100px; 
       width: 100%; 
       background-color: rgb(90, 90, 90); 
       margin-top: 25px; 
       margin-bottom: 25px; 

      } 
     </style> 
    </head> 
    <body> 
     <div id = "photoSliderContainer"> 
      <div id = "leftDivider"> 
       <div class = "picHolderSide"> 

       </div> 
       <div class = "picHolderSide"> 

       </div> 
       <div class = "picHolderSide"> 

       </div> 
      </div> 
      <div id = "centerDivider"> 
       <div id = "bottomDivider"> 

       </div> 
      </div> 
      <div id = "rightDivider"> 
       <div class = "picHolderSide"> 

       </div> 
       <div class = "picHolderSide"> 

       </div> 
       <div class = "picHolderSide"> 

       </div> 
      </div> 
     </div> 
    </body> 
</html>

출처

2016-08-10 Pixelknight1398

콜론에게 width: 20% 후 : 있습니다. 세미콜론 ;이어야합니다. 이로 인해 해당 컨테이너의 너비가 모두 무효가되고 position: absolute이 발생합니다. 이것은 해당 ID에 대한 올바른 코드 :

이

#rightDivider{ background-color: rgb(60, 60, 60); height: 100%; width: 20%: position: absolute; left: 80%; top: 0; }

팁 : 당신의 코드와 CSS를 검사하기 위해 크롬 개발자 도구 (F12)를 사용합니다. 너비와 위치가 브라우저에 의해 교차되어 있음을 볼 수 있습니다.

출처

2016-08-10 01:10:49 Garconis

와우 나는 그것을 간과 했다니 믿을 수 없어. 내가 구문 오류를 발견했다고 생각했다. 그게 내가 가진 모든 문제를 해결 했어 .- 믿을 수가 없어. 때로는 그냥 신선한 눈 걸립니다하지만 다시 한번 감사드립니다. – Pixelknight1398

약간의 CSS 혼란과 문제가 있습니다.

답변

관련 문제