[Css] Cho em hỏi khắc phục cái lỗi float này

[BeatOfAngle]

em có 1 bức ảnh
http://i259.photobucket.com/albums/hh304/hailya3/finish.jpg
nó dc chia thành nhiều mảnh nhỏ ko bằng nhau,em dùng css để ghép chúng lại thì lại bị thế này
http://i259.photobucket.com/albums/hh304/hailya3/unfinish-1.jpg
cái ảnh viền đỏ ấy, nó lại ko khớp với ảnh trên ,mặc dù em để margin-top:0px rồi
đây là code HTML

<div id="Layer1">
<img src="TaiNguyen2/ep_home_top_01.gif" />
<img src="TaiNguyen2/idx_top02.gif" />
<img src="TaiNguyen2/idx_top03.gif" />
<img src="TaiNguyen2/idx_top04.gif" />
<img src="TaiNguyen2/idx_top05.gif" />
</div>

và CSS


#Layer1 {
position:absolute;
width:610px;
height: auto;
}
#Layer1 img
{
float:left;
}



Cảm ơn các bác :)

[superthin]

Không cần gì đến DIV hay CSS cả. Bạn cứ lần lượt lát các ảnh như lát gạch ấy, từ trái qua phải và từ trên xuống dưới thôi. Nghĩa là nếu bạn băm ảnh thành abc dòng và def cột thì bạn cứ lần lượt mà lát. Ví dụ, mình lát một ảnh băm ra làm 6 tấm con, mà có 2 dòng như sau:

<img src="url ảnh 1" />
<img src="url ảnh 2" />
<img src="url ảnh 3" /><br />
<img src="url ảnh 4" />
<img src="url ảnh 5" />
<img src="url ảnh 6" />

Ở ví dụ của bạn, bạn cứ lát thẳng như đoàn tàu thì cách nào nó cũng nhảy như vậy mà thôi, cho dù bạn canh chỉnh thuộc tính float hay margin kiểu gì đi nữa. Hãy dùng <br /> để bẻ dòng khi lát hết một dòng.

[BeatOfAngle]

Ko dc rồi bác ạ ,làm thế lại bị như thế này
http://i259.photobucket.com/albums/hh304/hailya3/unfinish2.jpg
em để align="top" cho chúng thì lại lỗi như cũ
vì các ảnh ko cùng kích cỡ với nhau nên ko chia theo dòng hay cột dc

[phongjalvn]

Do bạn cắt lát các tấm hình không đều đó thôi

[superthin]

Ko dc rồi bác ạ ,làm thế lại bị như thế này
http://i259.photobucket.com/albums/hh304/hailya3/unfinish2.jpg
em để align="top" cho chúng thì lại lỗi như cũ
vì các ảnh ko cùng kích cỡ với nhau nên ko chia theo dòng hay cột dc

Không để align nào hết nhé. Và cũng không có chỉnh kính thước co giãn dạng fluid luôn là được thôi. Đặc biệt là bỏ mấy cái thuộc tính liên quan đến spacing, padding luôn.

[ndgiang84]

sao không giải quyết đơn giản hơn bằng cách thay đổi kiểu cắt ảnh nhỉ. cắt cho các ảnh có height bằng nhau hết đi, rồi ngắt dòng bằng <br /> :D

[BeatOfAngle]

dạ tại cái đề bài nó thế, dùng table cũng ko dc ,h em chỉ còn cách làm chay cho position:absolute ,căn chỉnh từng pixel sao cho nó khớp :(

[phongjalvn]

Cái đề bài đó hơi bị ... bá láp nói thật đó, đừng giận.
Thứ 1: sao không tối ưu ngay từ đầu mà phải đi lòng vòng qua 2-3 bước chi cho phức tạp vậy chứ
Thứ 2: nếu là tấm hình như trên bạn đưa ra, thì tốt nhất nên ... đưa nguyên tấm vào. Giảm lượng HTTPRequest nên server, giúp trang của bạn chạy nhanh hơn.
...