Отображение картинок в ряд (в формате HTML)

Итак, у меня есть эта очень простая 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>
6
html image row

5 ответов

Если вы хотите #images чтобы быть одной строкой, вы можете отключить перенос слова.

#images {
    white-space: nowrap;
}

JSFiddle

6

посмотреть этот 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;
}

Обновлено: без обертки!

3

сделайте свой контейнер div достаточно широкий, чтобы обрабатывать все ваши изображения.

допустим, все ваши изображения 300px на 300px;. если у вас есть 6 изображений, ваш div будет шириной 1800px

просто сделайте контейнер div достаточно широким, чтобы вместить все ваши изображения, и они не будут обернуты. Затем плывите каждое изображение влево.

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

Я подозреваю, что у кого-то с гораздо большими знаниями CSS будет лучший способ?...

0

с bootstrap:

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

посмотреть как разместить изображения бок о бок

0

здесь Скрипка

#images {
  width: 2000px; /* Increase if needed */
}
#images img {
  width: 300px;
  height: 200px;
  float: left;
}
-1