Question

以下是我想从谷歌图片搜索结果中借鉴的一些因素：

由于浏览器的窗口宽度，如果由于浏览器窗口宽度不适合当前行，每个项目都会彼此相邻并落到下一行。
当点击一个项目时，信息框会直接在所选项目的行下方滑动打开，它会填充浏览器的宽度，同时在所选项目的底部也会显示一个指示符。
打开信息框时，如果更改浏览器宽度，则项目会落入可以填充（首先排在最前面）或落入下面一行的行中。这不会影响信息框的100％宽度或其直接位于当前所选项目行下方的位置。

我已经通过创建具有display: inline-block

的DIV来实现第一个项目符号

我想要一个主要是HTML和CSS的解决方案，以及JavaScript（JQuery，AJAX等），只有在必要时，我不喜欢使用太多的HTML属性，除了我需要做的工作，如{{ 1}}，id，class等。我通常会尽可能使用CSS。

如果我可以坚持只使用HTML元素然后使用CSS来设置它们，那么只使用CSS和HTML（或任何衍生的JQuery，AJAX等）来实现残余无法实现。

到目前为止im的一个例子：

src

编辑：好的，这就是我提出的，它完全符合我的要求，希望这有助于任何想要做同样事情的人。

<html>
    <head>
        <style>
            div
                {
                     display: inline-block;
                     height: 200px;
                     width: 200px;
                }
        </style>
    </head>
    <body>
       <div>
           <img/>
       </div>
       <div>
           <img/>
       </div>
       <div>
           <img/>
       </div>
       <div>
           <img/>
       </div>
       <div>
           <img/>
       </div>
       <div>
           <img/>
       </div>
    </body>
</html>

尝试此操作并调整浏览器宽度，同时将<html> <head> <script> "Some JavaScript/JQuery etc code that will, first put the 'info' DIV block right after the selected item (code-wise), then alternates the 'display' CSS property of the '.info' class from none to normal so it renders just below the selected item. Just changing none to normal is enough because of the 'clear' and 'float' properties." </script> <style> div.item { background-color: blue; border: red 5px solid; display: inline-block; height: 200px; width: 200px; } div.info { background-color: grey; float: left; clear: both; width: 100%; height: 200px; display: normal; } </style> </head> <body> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="info"> Here lies some cool details about the item selected. Have your JS code put this DIV block right after the selected DIV block in code. You will notice that no matter how much you change the width of the browser, this block always remains under the selected item as long as your JavaScript put this code block directly after the selected item. </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> <div class="item"> <img src="some_relative_image.png"/> </div> </body> </html> DIV的display属性设置为normal。当宽度增加时，您会注意到所有项目框都高于info DIV，当宽度减小时，它们会落在info DIV之下。希望这有助于某人; D

Answer 1

如果您想尽可能避免使用javascript，可以在每个<div class='info'>之后创建一个<div class="item">，其中包含有关图片的详细信息，如下所示：

<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the first image.
</div>
<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the second image.
</div>
<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the third image.
</div>

之后，在你的css中替换这一行：

div.info
{
    display: normal;
}

使用：

div.info
{
    display: none;
}

这将在加载页面时隐藏详细信息。

最后，插入以下jQuery代码，以便在点击<div class="item">时显示详细信息：

$("div.item").click(function (){
    $("div.info").css("display", "none");
    $(this).find("+ div.info").css("display", "block"); 
});

信息框类似于Google图片搜索结果

1 个答案:

jsFiddle here