【问题标题】: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】:

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

  1. 将图像设置为浮动,以便它们可以并排显示:
  2. 确保您的容器 div 足够宽,以便图像可以并排放置。
  3. 删除每张图片后多余的<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>

并在您的&lt;body&gt; 标签中输入:

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

您可以随意重复&lt;div class="img_column"&gt;&lt;/div&gt;

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

<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 张幻灯片!)

【讨论】:

    猜你喜欢
    • 2018-04-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-01
    • 1970-01-01
    • 2019-08-18
    • 1970-01-01
    相关资源
    最近更新 更多