CSS : 개별 이미지 위치 지정

만화 웹 사이트를 구축하고 있지만 원하는 방식으로 이미지를 정렬하는 데 문제가 있습니다.CSS : 개별 이미지 위치 지정

나는이 갈거야 :

나는이 같은 행의 만화를 얻으려고 (파란색)

enter image description here

그러나 모든 이미지가오고있다 서로 위에 겹쳐서 :

enter image description here

내 CSS가 정확하다고 생각

...

*{ 
margin: 0; 
padding: 0; 
} 


body { 
background: gray; 
text-align: center; 
} 

#wrapper { 
width: 960px; 
margin: 0 auto; 
text-align: left; 
background: white; 
} 


#comics { 
/*top, right, bottom, left*/ 
margin: 50px 100px 50px 100px; 
} 

.comicBG { 
position: absolute; 
border: 1px dotted black; 
background: #99FF33; 
padding: 25px; 
    }

PHP :

echo '<td>'; 
echo '<span class="comicBG"><a href="./templates/viewcomic.php?id=' . $row['imgid'] . '"> 
<img src="' . $thumbpath.$row['imgthumb'] . '"/></a>' . 
'<br /><a href="./templates/viewcomic.php?id=' . $row['imgid'] . '">' .  $row['imgtitle'] . '</a></span>'; 
echo '</td>';

사람이 (이미지 등) 개별 데이터 요소를 배치하는 가장 좋은 방법을 알고 있나요? 테이블이나 목록을 사용해야합니까?

감사합니다.

출처

2012-10-21 Growler

나는 비 순번 목록을 사용합니다. 절대 위치로 설정하고 좌표를 설정하지 않았으므로 같은 위치에있는 모든 이미지를 볼 수 있습니다.

위치를 제거 할 수 있습니다 : 절대적이며 이미지는 행에 있어야합니다. 그리고 비 정렬 자리스트를 사용한다면, 당신은 왼쪽으로 li을 플로트 할 수 있습니다.

출처

2012-10-21 16:20:33 mariogl

float : left worked! 하지만 왜 테이블 위에 정렬되지 않은 목록을 사용합니까? 계속해서 전체 이미지를 제어 할 수 있습니까? (예를 들어 한 페이지에 6 개의 이미지를 모두 한 행에 넣고 싶지 않거나 페이지에서 벗어납니다.) – Growler

의미 상으로 테이블은 표 형식의 데이터 용입니다. 방금 이미지 목록이 있습니다. 줄 바꾸기에 너비가 있고 이미지 (또는 리)가 플로팅되면 한 행에 공간이 없을 때 새로운 행을 만듭니다. – mariogl

Mario에게 감사드립니다. 하지만 UL은 기본적으로 행 당 2 개의 LI를 기본값으로 사용합니다. 부모 요소의 너비가 너무 작아서 크기가 커졌다 고 생각했기 때문에 크기가 커졌습니다. 행당 2 개의 li로 설정되었습니다. 랩핑시 수동으로 변경할 수 있습니까? – Growler

CSS : 개별 이미지 위치 지정

답변

관련 문제