Mam więc bardzo prostą stronę HTML. Wszystko, czego chcę, to wyświetlanie obrazów w jednym długim rzędzie. Jaki jest najprostszy sposób, który działałby we wszystkich przeglądarkach?Wyświetl obrazy w wierszu (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>
Jeśli chcesz, aby #images był pojedynczym rzędem, możesz wyłączyć word wrapping.
#images {
white-space: nowrap;
}
Oto Fiddle
#images {
width: 2000px; /* Increase if needed */
}
#images img {
width: 300px;
height: 200px;
float: left;
}
Dokonaj pojemnik div wystarczająco szeroka, aby obsłużyć wszystkich swoich obrazów.
Załóżmy, że wszystkie Twoje obrazy mają rozmiar 300 na 300 pikseli. jeśli masz 6 zdjęć, twój div będzie miał 1800 pikseli szerokości
Wystarczy, aby pojemnik był wystarczająco szeroki, aby pomieścił wszystkie obrazy i nie będzie się zawijał. Następnie przenieś każdy obraz w lewo.
<style>
#images {
width: 1800px;
height: 300px;
}
#images img {
float: left;
}
</style>
jestem podejrzewać kogoś o wiele więcej wiedzy CSS będzie miał lepszy sposób ...
Look to jsbin
Myślę, że to najprostszy sposób:
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;
}
Zaktualizowano: Bez zawijania!
będzie zawijać. – timgavin