如何在网页中将照片排列成一行而不是一列？答案

【问题标题】：How to arrange photos in a row rather than a column in a webpage?如何在网页中将照片排列成一行而不是一列？
【发布时间】：2014-01-28 18:32:27
【问题描述】：

我正在尝试将这些照片（您在 (http://www.barcaffecitta.it/chi-siamo/) 中看到的那些照片排列成一行而不是一列。有人可以解释一下如何做到这一点吗？另外，在为图像创建 div 时，我可以只创建一个 div 还是应该为每个图像创建一个 div？另外，如果您可以简要解释一下如何使用 html 和 css 创建文本或其他对象（不仅是图像）的行和列，那就太好了

【问题讨论】：

你在那里问了很多不同的问题。如果您一次只问一个问题，您可能会得到更多的答复。

标签： css wordpress html-table html

【解决方案1】：

要回答您的主要问题，要让图像水平平铺，您需要做三件事。

将图像设置为浮动，以便它们可以并排显示：
确保您的容器 div 足够宽，以便图像可以并排放置。
删除每张图片后多余的<br> 标签。

您的 CSS 或多或少应该是这样的。

.alignnone {
    float: left;
    margin: 5px 20px 20px 0;
}

#head-shots {
    float: left;
    width: 100%;
}

【讨论】：

这个类 (.alignnone) 到底是什么，它只适用于这些图像吗？
我不知道。所有这些图像都有那个类。不知道还有没有其他的。我刚刚查看了您通过 FireBug 提供的链接中的 html（如果您碰巧使用的是 FireFox，这是一个很好的资源）。 Chrome 和 Internet Explorer 有类似的工具。
您可能想改用.wp-image-122，因为该类也适用于这些图像。
似乎正在工作.. 我只需要删除
标签，但在我看来，没有标签.. 但视觉上我可以告诉有.. 怎么办？

【解决方案2】：

例如，您的图片名称是 image.jpg，它的高度为 100 像素，宽度为 100 像素：

在标签<head>中放这个：

<style>
.div_row
{
  width: 100px;
  min-height: 100px;
}
.img_column
{
  width: 100px;
  height: 100px;
  background: url('image.jpg') no-repeat;
  float: right;
}
</style>

并在您的<body> 标签中输入：

<div class="div_row">
  <div class="img_column"></div>
  <div class="img_column"></div>
  <div class="img_column"></div>
  <div class="img_column"></div>
  <div class="img_column"></div>
  <div class="img_column"></div>
</div>

您可以随意重复<div class="img_column"></div>。

但我认为这是对你更好的建议！

<style>
.div_row
{
  width: 100px;
  min-height: 100px;
}
.img_column
{
  width: 100px;
  height: 1000px;
  background: url('image.jpg') repeat-y;
  float: right;
}
</style>

<div class="div_row">
  <div class="img_column"></div>
</div>

这会将您的图像重复 10 次！（1000 高度 / 10 张图片 = 10 张幻灯片！）

【讨论】：