6

だから私はこの非常に単純な HTML ページを持っています。私が望むのは、画像を1行に表示することだけです。すべてのブラウザで機能する最も簡単な方法は何ですか?

<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>
4

5 に答える 5

6

1 行にしたい場合は、ワード ラッピング#imagesをオフにできます。

#images {
    white-space: nowrap;
}

JSFiddle

于 2013-09-07T21:36:05.563 に答える
4

この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;
}

更新：ラップなしで！

于 2013-09-07T21:35:37.207 に答える
0

すべての画像を処理できるように、コンテナーdivの幅を十分に広くしてください。

すべての画像が 300px x 300px であるとしましょう。画像が 6 つある場合、div の幅は 1800px になります。

すべての画像を収容できるようにコンテナ div の幅を広くするだけで、画像は折り返されません。次に、各画像を左にフロートします。

<style>
    #images  {
        width: 1800px;
        height: 300px;
    }
    #images img {
        float: left;
    }
</style>

CSSの知識が豊富な人ならもっと良い方法があるのではないでしょうか?...

于 2013-09-07T21:32:45.813 に答える
0

ブートストラップあり:

<div class="row">
   <div class="column">
      <img src="1.jpg">
   </div>
   <div class="column">
      <img src="2.jpg">
   </div>
   ...
</div>

画像を並べて配置する方法を参照してください

于 2018-09-14T19:11:32.720 に答える
-1

ここにフィドルがあります

#images {
  width: 2000px; /* Increase if needed */
}
#images img {
  width: 300px;
  height: 200px;
  float: left;
}
于 2013-09-07T21:27:22.860 に答える