CSS：挤多个图像相互靠近

的什么我尝试才达到又如：

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

代码：

<body> 8x <img /> </body>

CSS：

你好，

我在其中显示像这样的HTML页面3个图像：（基本上，在代码中，它只有三个<img />连续）

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

但我想它显示没有第二个和第三个之间的垂直间隙，如：

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

如何？是否有可能做这个CSS？

编辑：

换句话说，我希望第三图像触摸一日一个，因为显然是留有一定的空间。但是屏幕不够大，第三个“回流”（这是正确的词？）到下一行，它保持上面的行高度最高的元素。我不希望它保持高度，我希望它紧密贴合在一起..

编辑2：

代码：

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

这真的只是一个几张图片中一行......

来源

2010-07-30 Theo Heikonnen

是的，试试这个，设置图像1和3向左浮动，图像2向右浮动。如果这不起作用，我会帮助你。 – jnkrois 2010-07-30 16:14:05

问题是，一般来说，可能会有更多的图像比3，所以我不知道哪一个漂浮左或右... – 2010-07-30 16:20:26

所以，你直到运行时才知道有多少图像，以及什么大小是？如果是这样，第四张图片会发生什么？如果图像3比图像1宽？ – joelt 2010-07-30 16:42:17

首先将图像1和3放入HTML中，并向它们添加属性align =“left”。

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

来源

2010-07-30 16:13:16 elmonty

哇。我没有看到'align =“left”'，因为像2001 – 2010-07-30 16:26:23

事实上它会更容易，如果你能展示一些代码... 但你可以像

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

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

定位图像，并与您acually相应要将图像的大小，位置试验...

，或者你可以提出他们作为背景图片这样的：

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

固定位置并不总是最好的一段路要走，但它可能工作在你的情况...

尝试谷歌搜索的CSS图像，你可以找到很多东西... 也这是一个很好的资源：http://www.opera.com/company/education/curriculum/

，这是一个真正有用的CSS食谱http://www.amazon.com/CSS-Anthology-Essential-Tricks-Hacks/dp/0980576806

好运

来源

2010-07-30 16:28:44 rabidmachine9

'position：absolute;'可能会比'position：fixed;'更容易混淆。 – strager 2010-07-30 17:46:03

如果你提前知道时间的图像，然后我不明白为什么你需要一般的解决方案。对于一个具体的案例，jnkrois给出了很好的答案。

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

来源

2010-07-30 17:43:20 joelt

即使我提前知道图像，我也不知道浏览器宽度，因此它们可能会回流。是的，我可以检查JavaScript中的浏览器大小，然后打包图像，但它感觉有点令人难以置信，它不能做到纯粹的CSS。 – 2010-07-31 01:15:09

你应该试试砌体jQuery插件。看一下插件页面，你应该看到你想要实现的一个例子：http://desandro.com/resources/jquery-masonry/

来源

2010-09-04 16:50:38 Andrei

CSS：挤多个图像相互靠近

回答

相关问题