2013-02-15 5 views
0

CSS는 기꺼이 배우기는하지만 새로운 것이지만이 문제를 해결할 수는 없습니다.왜 이미지가 제대로 정렬되지 않습니까?

컨테이너 내의 페이지 왼쪽에 7 개의 작은 이미지가 포함 된 정렬되지 않은 목록이 있습니다.

목록 아래의 페이지 하단에 세 개의 이미지를 정렬하고 싶습니다.

아래쪽 3 개의 이미지가 아래로 늘어나고 컨테이너에서 빠져 나오면 열의 오른쪽이 정렬되는 것처럼 보입니다. 이미지는 테이블에 있지만 더 좋은 방법이 있으면 그것을 사용하여 행복.

내가 여기 내려 놓고 모르겠어요 그래서 코딩이 많이있다,하지만 URL은 다음과 같습니다 당신이 div의 대신 table의를 사용하는 것이 좋습니다 것입니다

http://www.c5d.co.uk/coursehistoryfour.php

답변

0

당신은 td의 폭을 관리하여 폭을 관리 할 수있는 내가 얼마나 확인할 수 있습니다 짧은 바이올린을 만든 후 이미지가 100 %

<table> 
<tbody> 
<tr> 
<td witdh="33%"><img width="100%" height="" alt="JWK" src="http://www.c5d.co.uk/JWK.jpg" title="J W Kenworthy" class="renouf"> J W Kenworthy: The First President</td> 
<td width="33%"><img width="100%" height="" alt="" src="http://www.c5d.co.uk/parnaby.jpg" title="Henry Parnaby" class="renouf">Rev<sup>d</sup> Henry Parnaby: The First Captain</td> 
<td width="33%"><img width="100%" height="" alt="" src="http://www.c5d.co.uk/renouf.jpg" title="Tommy Renouf" class="renouf">Thomas Renouf: Course Designer</td> 
</tr> 
</tbody> 
</table> 

폭 그러나 div를 사용하는 것이 좋습니다 table 및 대신 큰 이미지 크기를 넣으므로 브라우저에서 볼 수있는 실제 크기로 크기를 조정해야 브라우저로드 속도가 빨라집니다.

+0

고마워. 잘 작동합니다. 어쩌면 이미지의 크기를 다시 조정하여 모두 같은 크기가되도록해야합니다. –

1

. 난 당신이 jsFiddle

+0

제발, "당신"입니다. – JJJ

+0

감사합니다. 나는 당신이 바이올린으로 무엇을 의미하는지 모르겠습니다. 나는이 새로운 –

+0

내 대답 안에 jsFiddle 텍스트 내 코드를 볼 수있는 링크입니다. – dinodsaurus

관련 문제