6

所以我有这个非常简单的 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>
4

5 回答 5

6

如果你想#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足够宽以处理所有图像。

假设您所有的图像都是 300 像素 x 300 像素；。如果你有 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 回答