Vì vậy, tôi có trang HTML rất đơn giản này. Tất cả những gì tôi muốn là hiển thị hình ảnh trong một hàng dài. Cách đơn giản nhất có thể hoạt động trên tất cả các trình duyệt là gì?Hiển thị hình ảnh liên tiếp (HTML)
<html>
<head>
<title>My title</title>
</head>
<body>
<div id="images">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</body>
</html>
Nếu bạn muốn #images thành một hàng, bạn có thể tắt word wrapping.
#images {
white-space: nowrap;
}
Dưới đây là một Fiddle
#images {
width: 2000px; /* Increase if needed */
}
#images img {
width: 300px;
height: 200px;
float: left;
}
Hãy container của bạn div đủ rộng để xử lý tất cả các hình ảnh của bạn.
Giả sử tất cả hình ảnh của bạn là 300px x 300px ;. nếu bạn có 6 hình ảnh, div của bạn sẽ rộng 1800px
Chỉ cần làm cho div chứa đủ rộng để chứa tất cả hình ảnh của bạn và chúng sẽ không bị quấn. Sau đó thả nổi từng ảnh.
<style>
#images {
width: 1800px;
height: 300px;
}
#images img {
float: left;
}
</style>
Tôi nghi ngờ ai đó với nhiều kiến thức CSS sẽ có một cách tốt hơn ...
Nhìn này jsbin
Tôi nghĩ rằng đây là cách đơn giản nhất:
HTML :
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
<li><img src="5.jpg"></li>
<li><img src="6.jpg"></li>
</ul>
CSS:
ul {
white-space: nowrap;
}
ul, li {
list-style: none;
display: inline;
}
Đã cập nhật: Không cần bọc!
này sẽ quấn. – timgavin