Tôi có thể đưa hình ảnh vào một định dạng giống như lưới như thế nào?

Question

Tôi có khoảng 12-15 hình ảnh mà tôi muốn căn chỉnh cùng nhau trong lưới, với văn bản bên dưới mỗi hình ảnh. Tôi đã nghĩ đến việc sử dụng một cái bàn, nhưng tôi nghe rằng những cái bàn không phải là cách tốt nhất để đi vào những ngày này. Tôi đã thử một số thứ khác, nhưng không có gì có vẻ hoạt động theo cách tôi muốn.

Một ví dụ về những gì tôi muốn nó trông giống như sẽ là một cái gì đó như thế này:

[----- Hình ảnh -----] [----- Hình ảnh -----] [----- Hình ảnh -----] [----- Hình ảnh -----] --- Hàng 1

(--Description-) (-Description-) (-Description-)) (-Mô tả-)

[----- Hình ảnh -----] [----- Hình ảnh -----] [----- Hình ảnh -----] [ ----- Hình ảnh -----] --- Hàng 2

(--Description-) (-Description-) (-Description-) (-Description-)

và cứ thế ...

Một số phương pháp khác ngoài bảng, mà tôi nên xem xét khi sử dụng là gì? Bất kỳ đề xuất hoặc tham chiếu nào đều hữu ích.

Answer 1

HTML:

 
<div class="floated_img"> 
    <img src="img.jpg" alt="Some image"> 
    <p>Description of above image</p> 
</div> 
<div class="floated_img"> 
    <img src="img2.jpg" alt="Another image"> 
    <p>Description of above image</p> 
</div> 

CSS:

 
.floated_img 
{ 
    float: left; 
} 

Có thể bạn sẽ muốn có một số phong cách hơn, nhưng điều đó nên làm về cơ bản những gì bạn muốn.

Answer 2

Định dạng như lưới? nghe như bàn cho tôi. Không có gì sai với bảng nếu bạn đang sử dụng chúng cho cái gì đó thực sự là một bảng.

Answer 3

Vì bạn đã nói lưới có nghĩa là chiều cao và chiều rộng sẽ được cố định.

Khối nội tuyến có thể hoạt động rất tốt cho bạn. Tôi thấy chúng dễ làm việc hơn với phao nổi. Và, inline-block tôn trọng tài sản class kế thừa (vì vậy bạn có thể có họ làm trung tâm)

CSS

.grid_element { 
    display: inline-block; 
    width: 200px; 
    height:200px; 
    zoom: 1;   /* for IE */ 
    display*:inline; /* for IE */ 
} 

Tuy nhiên, các yếu tố inline-block có thể không hoạt động rất tốt trên các trình duyệt cũ.

Một số Reading:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html