この非常に単純なHTMLページがあります。私が望むのは、1つの長い行に画像を表示することだけです。すべてのブラウザで動作する最も単純な方法は何ですか？イメージを連続して表示する（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>
ここにあなたのすべての画像を処理するのに十分ごコンテナdivが広い作りFiddle
#images {
width: 2000px; /* Increase if needed */
}
#images img {
width: 300px;
height: 200px;
float: left;
}
です。
すべての画像が300ピクセル×300ピクセルであるとします。画像が6枚の場合、divは1800pxの幅になります
すべての画像を格納できるようにコンテナdivを作成してください。そして、各画像を左に浮かべてください。私ははるかにCSSの知識を持って誰かを疑ってる
<style>
#images {
width: 1800px;
height: 300px;
}
#images img {
float: left;
}
</style>
がより良い方法を持っています...
見て、このjsbin
私はこれが最も簡単な方法だと思います？
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;
}
更新日：ラップしないでください！
これはラップします。 – timgavin