Question

是否有可能显示彼此相邻的div并相互吼叫，而不是像Google图像搜索google那样相互吼叫，如果图像是div？

我认为我没有清楚地解释我的问题，但这是我能做的最好的事情！

Answer 1

如果您的意思是将图像堆叠在一起，可以填充视图，您可以使用display:inline-block;查看下面的示例：

<强> HTML

<div><img src="http://placehold.it/100x100"><span>G</span></div>
    <div><img src="http://placehold.it/100x100"><span>O</span></div>
        <div><img src="http://placehold.it/100x100"><span>O</span></div>
            <div><img src="http://placehold.it/100x100"><span>G</span></div>
                <div><img src="http://placehold.it/100x100"><span>L</span></div>
                    <div><img src="http://placehold.it/100x100"><span>E</span></div>

<强> CSS

div{display:inline-block;position:relative;}
span{display:block;position:absolute;top:5%;left:20%;text-align:center;font-size:80px;}

例如

http://jsfiddle.net/QJZ65/2/

的修改

如果您想要实现谷歌图片搜索，这种方式将根据图像的大小扩展div。在下面的链接中，我更新了每个图像的大小，以显示容器会发生什么。

http://jsfiddle.net/QJZ65/3/

如果要构建一个垂直和水平使用所有可能空间的网格，可以尝试 Masonry 。

http://masonry.desandro.com/

Answer 2

如果您的意思是在一系列动态尺寸中排列一系列Div个元素，您可以将Div这个css规则赋予：

float:left;

或者，如果您将它们设置为inline或inline-block元素，那么也可以实现它：

display:inline;

或

display:inline-block;

显示不同大小的div框

2 个答案: