Html CSS：将多个图像压缩到彼此靠近的位置_Html_Css

Html CSS：将多个图像压缩到彼此靠近的位置

html css

Html CSS：将多个图像压缩到彼此靠近的位置,html,css,Html,Css,**编辑3：** 我试图实现的另一个例子： +--------------------+ | | | +--++--++--++--+ | | |1 ||2 ||3 ||4 | | | | || |+--+| | | | +--+| |+--+| | | | +--+| ||7 |+--+ | | |5 |+--+| |+--+ | | | |+--+| ||8 | | | | ||6 || |+--+

**编辑3：**

我试图实现的另一个例子：

+--------------------+
|                    |
|  +--++--++--++--+  |
|  |1 ||2 ||3 ||4 |  |
|  |  ||  |+--+|  |  |
|  +--+|  |+--+|  |  |
|  +--+|  ||7 |+--+  |
|  |5 |+--+|  |+--+  |
|  |  |+--+|  ||8 |  |
|  |  ||6 ||  |+--+  |
|  +--+|  |+--+      |
|      +--+          |
|                    |
+--------------------+

代码：

你好,

我在HTML页面中有3个图像，如下所示：（基本上，在代码中，一行只有三个）

但我希望它在第二个和第三个之间没有垂直间隙，比如：

+------------------+
|                  |
|  +---++-------+  |
|  |1  ||2      |  |
|  |   ||       |  |
|  +---+|       |  |
|  +--+ |       |  |
|  |3 | +-------+  |
|  |  |            |
|  +--+            |
|                  |
|                  |
|                  |
+------------------+

怎么做？有可能做到这一点吗

编辑：

换句话说，我希望第三张图片与第一张相接触，因为显然还有一些空间。但当屏幕不够大时，第三个“回流”（这是正确的词吗？）到下一行，保持从上一行到下一行的最高元素的高度。我不想让它保持高度，我想让它紧密贴合

编辑2:

代码：

实际上，这只是一行中的几个图像……

将图像1和3放在HTML的第一位，并向它们添加属性align=“left”

或者，您可以使用CSS position:absolute并为每一个设置显式的X、Y坐标。

实际上，如果您可以显示一些代码，这会更容易。。。但是你可以这样定位图像

.image1{
     position:fixed;
     right:20px;
     top:50px;
}

.image2{
   position:fixed;
     right:100px;
     top:50px;
}

并根据图像的大小来尝试你真正想要的位置

或者，您可以将其作为背景图像显示，如下所示：

.something {
    background-image:url(yourpath.jpg);
    position:fixed;
    top:711px;
        left:10px;
    display:block;
    height:100px;
    width:269px;
}

固定位置并不总是最好的方式，但它可能在你的情况下工作

尝试用谷歌搜索css图像，你会发现很多东西。。。这也是一个很好的资源：

这是一本非常有用的css食谱

祝你好运

如果你提前知道图像，那么我不明白你为什么需要一个通用的解决方案。jnkrois对一个具体案例给出了很好的回答

如果您想要一个通用的解决方案，我会将它们全部定位为绝对位置，并在运行时使用javascript计算位置。从本质上讲，你正在寻找一种打包算法，你可以在很多地方找到它。

你应该试试jQuery插件。看看插件页面，你会看到一个你想要实现的示例：

是的，试试这个，将图像1和3设置为左浮动，将图像2设置为右浮动。如果这不起作用，我会帮你更多。问题是，一般来说，图像可能多于3个，所以我不知道应该向左或向右浮动哪一个…所以直到运行时你才知道有多少图像，以及图像的大小是什么？如果是这样的话，第四幅图像会怎么样？如果图3比图1宽怎么办？是的，我知道手头上的图像数量。但我不知道浏览器的宽度是多少。。。如果3比1宽，它应该接触2，就像在第一个例子中一样..甚至可能是宽度都一样，只是高度不同..哇。我从2001年起就没有见过像这样的

align=“left”

位置：绝对可能比

位置：固定的更容易混淆。即使我提前知道图像，我也不知道浏览器的宽度，所以它们可能会回流。是的，我可以在javascript中检查浏览器大小，然后打包图像，但感觉有点难以置信，它不能在纯CSS中完成。
+------------------+
|                  |
|  +---++-------+  |
|  |1  ||2      |  |
|  |   ||       |  |
|  +---+|       |  |
|  +--+ |       |  |
|  |3 | +-------+  |
|  |  |            |
|  +--+            |
|                  |
|                  |
|                  |
+------------------+

<html><body>
<img /><img /><img />
</body><html>

.image1{
     position:fixed;
     right:20px;
     top:50px;
}

.image2{
   position:fixed;
     right:100px;
     top:50px;
}

.something {
    background-image:url(yourpath.jpg);
    position:fixed;
    top:711px;
        left:10px;
    display:block;
    height:100px;
    width:269px;
}