Question

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

Answer 1

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

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

你的CSS应该或多或少看起来像这样。

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

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

Answer 2

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

标记<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个幻灯片！）

如何在网页中连续排列照片而不是列？

2 个答案: