이미지를 제대로 열 정렬 할 수 없습니다.

Question

<a class="profile_link" href=""> 
    <div class="thumb_container"> 
    <img class="thumb_image" src="" alt="thumb"/> 
    <span class="model_names">name</span> 
    </div> 
</a> 

a.profile_link{ 
color: black; 
outline: none; 
text-decoration: none; 
} 

.thumb_container{ 
float:left; 
padding-left: 9px; 
padding-right: 9px; 
padding-bottom: 10px; 

} 


img.thumb_image{ 
display: block; 

} 


.model_names{ 
font-size: 12px; 
text-align: center; 
} 

이 코드는 내가 원하는 것만을 제공합니다. 그래서 나는이 링크를 반복했다. 엄지와 모델 이름 바로 아래에 중심이있다. 나는이 엄지와 이름을 행에 동적으로 배치하고 충분한 공간이 없을 때 다른 행을 만들길 원합니다. 지금 당장하고 있지만 때로는 버그가 생겨 행을 건너 뜁니다. 그냥 엉망입니다. 엄지 손가락의 크기는 다양 할 수 있습니다. 충분한 공간이 없으면 줄 끝에서 틈새를 두지 않아도됩니다.

또한 크기가 800px 너비 인 붙여 넣기를하지 않은 기본 컨테이너 div도 있습니다.

아마도 누군가이 레이아웃에 접근하는 더 깔끔하고 깨끗한 방법을 가지고있을 것입니다.

Answer 1

플로팅 된 div이 플로팅되지 않은 a에 배치되어 문제가 발생했다고 생각합니다. 이 부분은 div으로 플로팅되지만, a은 인라인 요소이므로 효과가 무효화됩니다.

a 요소에 .thumb_container 스타일 선언을 추가해보십시오.

아직 크기가 다른 미리보기 이미지를 사용하는 경우보기 흉하게 보일 수 있습니다. 특정 너비와 높이를 포함하는 div으로 설정하고 을 hidden으로 설정해보십시오. span을 div.thumb_container 외부로 옮겨야하지만 문제가되지 않습니다. 그런 다음 CSS 및/또는 JS 효과를 사용하여 마우스 오버시 전체 미리보기 이미지를 표시 할 수 있습니다.