사업부 포지셔닝 혼란

저는 Css를 처음 사용합니다. HTML 페이지가 있습니다.사업부 포지셔닝 혼란

<body> 

    <div id="viewer"> 

     <div id="flow"> 

      <img src="images/beatles.jpg"> 
      <img src="images/blink.jpg"> 
      <img src="images/doves.jpg"> 
      <img src="images/flash.jpg"> 
      <img src="images/floyd.jpg"> 
      <img src="images/jurassic.jpg"> 
      <img src="images/naked.jpg"> 
      <img src="images/prodigy.jpg"> 
      <img src="images/xx.jpg"> 
      <img src="images/zabiela.jpg"> 

     </div> <!--end of <div id="flow"> --> 

     <ul> 
      <li id="left"> 
       <a href="#" title="Move Left">Left</a> 
      </li> 

      <li id="right"> 
       <a href="#" title="Move Right">Right</a> 
      </li> 
     </ul> 

    </div> <!--end of <div id="viewer"> --> 

</body>

각 이미지는 200x200입니다. 이제 나는 그것의 CSS와 혼동스러워합니다. 여기에 단계별로 설명되어 있습니다.

#viewer { 
    width:700px; 
    height:220px; 
    padding:100px 0 30px; 
    margin:auto; 
    border:1px solid #000; 
    position:relative; 
}

주요 div의 너비와 높이를 정의합니다. 패딩을 정의하면 div 내부에있는 각 요소가 상단에서 200 픽셀, 왼쪽과 오른쪽에서 sapce가없고 div의 아래쪽에서 30 픽셀 떨어진 곳에 배치됩니다. 또한 나는 여기서 상대적인 위치를 정의하도록 요청하고 싶다. 그것은 신체 또는 html과 관련하여 상대적입니까? #flow div width 및 height를 정의하지 않았습니다. 그래서 그것은 패딩에 의해 계산됩니다. #flow div 너비는 #viewer 너비와 동일하지만 #viewer div 상단에서 30px 아래에 놓습니다. 높이는 190px이고 하단에서 30px 위입니다. 내가 틀렸다면 말해줘.

#flow:after { 
    content:""; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
}

이제 #flow div 다음에 입력 할 콘텐츠를 정의하고 있습니다. 우리는 가시성을 숨김으로 설정했습니다. 즉, 공간을 차지하면서도 보여주지는 않습니다. 그렇지? 여기에서 물어보고 싶은 것은 이것입니다, 우리는 을 사용하고 있습니다 : 모두입니다. 우리 여기서 뭐라구? #viewer div에 float 속성을 설정하지 않았습니까?

지금 혼란 일부에게 #flow 사업부에

#flow img { 
    display:block; 
    margin-left:-165px; 
    position:relative; 
    top:-15px; 
    left:245px; 
    float:left; 
    background-color:#fff; 
}

이제 우리가 설정하는 이미지를 온다. 가장 먼저 알아야 할 것은 혼란 스럽습니다. 그런 다음 # flow div와 관련하여 정렬됩니다. 어느 것이 위치가 상대적이므로 #flow div 내부에 있으므로 #flow div와 관련하여 정렬됩니다. 하지만 변경할 때 1px 속성이 남아 있습니다. 그런 다음 두 div (#viewer 및 #flow)를 넘습니다. div의 왼쪽 모서리와 왼쪽의 중앙 사이에 어딘가에 정렬하십시오. 왜 그런 일인가? 위치가 상대적 인 경우 #flow div 안에 있어야합니다. 이것은 나의 혼란이다. 또한 div 안에 이미지를 축소 할 수 있습니다. 나는 그것이 dov 크기 때문에라고 생각한다. 각 이미지는 200x200입니다. #flow 너비는 700px입니다.

또 다른 설정 margin-left : -165px;. 지금 이미지는 수평으로 정렬되며 div에서도 수용 할 수 있도록 축소됩니다. 하지만 만약 내가 margin-left : 165px;. 그런 다음 이미지가 세로로 확장되고 모든 이미지가 표시됩니다. 이미지는 축소되지 않습니다. 또한 우리는 상단을 설정합니다 : -15px;. 우리는 언제 부정적인 값을 설정합니까? 과제 나 숙제가 아닙니다. 나는 단지 연습하고 있고 나는 일이 어떻게 작동하는지 알고 싶다. 여기에 CSS가 불을 지르고와 파이어 폭스를 설치하는 것입니다 작동 방법을 찾아 나머지 CSS를

#viewer li { 
    list-style-type:none; 
    position:absolute; 
    bottom:10px; 
} 

#left { 
    left:20px; 
} 

#right { 
    right:20px; 
}

감사

출처

2012-02-24 Basit

문제의 원인을 알려주십시오 : http://jsfiddle.net/tXcg9/ – jao

좋은 시작이다. 방화범이 끌려 오면, 요소 위에서 마우스를 가져 가면 스타일을 볼 수 있습니다.

두 번째로 더 나은 조직을 위해 li 태그에 이미지를 배치합니다.

출처

2012-02-24 09:52:32

@jsfiddle, 제 문제는 제 질문입니다. 왜 내가 왼쪽으로 1px로 설정할 때 이미지가 div 밖으로 나가는 지에 대한 혼란. 그것은 div 안에 있어야합니다. 나는 당신에게 내가 CSS에 새로운 브랜드라고 말했다. (예. 파이어 버그를 가지고 있고, 변화를 보았을 때, 나는 변화를 보았고, 내가 이해하지 못했던 것을 여기서 묻는다. – Basit

사업부 포지셔닝 혼란

답변

관련 문제