Làm cách nào để tạo các thẻ <img> xếp hàng theo chiều ngang trong div?

Tôi cần làm cho hình ảnh hiển thị cạnh nhau theo chiều ngang trong div. Làm thế nào tôi có thể làm điều đó?Làm cách nào để tạo các thẻ <img> xếp hàng theo chiều ngang trong div?

HTML:

<div class="Wrapper"> 
    <img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" /> 
    <img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" /> 
    <img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" /> 
</div>

tham khảo: jsFiddle

Nguồn

2012-07-03 justcode

chỉ cho chúng ta HTML của làm thế nào bạn đang sắp xếp này IMG ở nơi đầu tiên. – Starx

Bắt đầu bằng cách cung cấp thêm thông tin cho chúng tôi ... HTML, có thể là jsfiddle.net để cung cấp cho chúng tôi ý tưởng về những gì bạn đã cố gắng – freefaller

Cập nhật phần html trong mã của bạn để người khác có thể trả lời tốt hơn. – Starx

Bạn cũng có thể sử dụng các thuộc tính css display: inline-block hoặc float: left để đạt được điều này.

Mã HTML

<div> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div>

Mã CSS

div img{ display: inline-block;}

hoặc

div img{ display: block;float: left;margin-right: 5px;}

Nguồn

2012-07-03 10:57:01 Ravi

Sử dụng đánh dấu bạn đã đưa ra, chỉ có hai hình ảnh đầu tiên sắp xếp theo chiều ngang ... xin bạn có gợi ý gì không? – justcode

Hãy thử tăng chiều rộng của vùng chứa mà chúng đang ở. Có lẽ chúng không vừa vặn để chúng có thể phá vỡ một dòng khác. – menislici

awesome! ... works ... thanks – justcode

bây giờ bạn có thể sử dụng để

của bạn liên kết mặc định là http://tinkerbin.com/ob9HFOA4

Css

img{ 
    display: inline-block; 
    vertical-align: top; 
    }

sống bản demo http://tinkerbin.com/a5BxIZrs

Nguồn

2012-07-03 10:47:59

Giả sử này là gì? – Starx

tôi nghĩ rằng bạn nên http://tinkerbin.com/pakIgNQQ –

Trên giả định chung của mã là của bạn một cái gì đó như thế này

<div> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div>

Sau đó, một thuộc tính CSS đơn giản sẽ hoàn thành công việc.

div img { display: inline; }

Nhìn thấy phần HTML của bạn. Bạn có thể sử dụng CSS sau để đưa chúng trực tuyến.

.partners img { display: inline; }

Nguồn

2012-07-03 10:48:39 Starx

Thay vì sử dụng inline, mà cướp bạn của rất nhiều sự kiểm soát mà đi kèm với block yếu tố, hoặc thay đổi class dọc của họ, tôi muốn nổi chúng:

<html> 
    <head> 
     <style> 
      div.img_holder img 
      { 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <div class = "img_holder"> 
      <img src="" /> 
      <img src="" /> 
      <img src="" /> 
      <img src="" /> 
     </div> 
    </body> 
</html>

Floating là một đặc biệt khoa học của riêng mình trong CSS; nó rất đáng học tập vì nó có thể mang lại một số kết quả rất mạnh mẽ. Ví dụ: những hình ảnh này là divs và không phải hình ảnh, sử dụng inline sẽ giúp bạn không đặt chiều cao của chúng. Inline cũng ảnh hưởng đến cách hoạt động của margins và padding. vertical-align không phù hợp giữa các trình duyệt và nếu tôi không nhầm, thực sự không nên mang lại kết quả mà bạn đang tìm kiếm.

Nguồn

2012-07-03 10:55:03

Tôi đã sử dụng thuộc tính float và chỉ 2 ảnh được căn chỉnh theo chiều ngang .... bạn có gợi ý gì không? – justcode

Floats sẽ cư xử một chút giống như các yếu tố nội tuyến trong đó họ sẽ quấn nếu cha mẹ của họ là không đủ lớn. Đặt chiều rộng của bố mẹ (trong ví dụ của tôi là 'img_holder') thành mức thích hợp sẽ giúp ích. Nếu không, bạn có thể cung cấp ảnh chụp màn hình không? Hình ảnh của bạn rộng 95 pixel (theo như trên), chúng cũng có lề hoặc đệm? –

flirts hết, để không làm lộn xộn lên hình ảnh khác của bạn có thể là bạn đang đi để thêm , hãy thực hiện việc này:

.Wrapper img{ float: left; }

Điều này sẽ làm nổi bật tất cả hình ảnh của bạn trong lớp .Wrapper ở bên trái. Nếu tất cả các hình ảnh trong trang mà các quy tắc css được gọi sẽ được sắp xếp sang bên trái, thực hiện điều này:

.Wrapper img{ float: left; }

EDIT: Thêm quy tắc này để .Wrapper

.Wrapper{ width: 100%; }

Nguồn

2012-07-03 18:49:19 menislici

Tôi đã sử dụng thuộc tính float nhưng chỉ hai trong số các ảnh được căn chỉnh theo chiều ngang ... – justcode

Làm cách nào để tạo các thẻ <img> xếp hàng theo chiều ngang trong div?

Trả lời

Các vấn đề liên quan