-2

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

  • 如果由于浏览器窗口宽度而无法放入当前行，则每个项目彼此相邻并落到下一行。

  • 单击一个项目时，一个信息框会在所选项目所在行的正下方滑动打开，它会填满浏览器的宽度，并且在所选项目的底部可以看到一个指示器。

  • 打开信息框时，如果更改了浏览器宽度，则项目将落入可以填充的行（顶部优先）或落入下面的行。这不会影响信息框的 100% 宽度或其在当前选定项目行正下方的位置。

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

我想要一个主要是 HTML 和 CSS 的解决方案，只有在必要时才使用 JavaScript（JQuery、AJAX 等），我不喜欢使用太多的 HTML 属性，除了我需要使它工作的那些，比如id，class等等src。我通常尽可能使用 CSS。

如果我可以只使用 HTML 元素，然后使用 CSS 设置它们的样式，那么仅使用 CSS 和 HTML 无法满足的剩余部分可以使用 JavaScript（或任何衍生的 JQuery、AJAX 等）来满足。

到目前为止我在哪里的一个例子：

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

试试这个并display在 DIV 的属性info设置为正常时调整浏览器的宽度。您会注意到随着宽度的增加，所有项目框都在infoDIV 上方，而随着宽度的减小，它们会落在 DIV 下方。希望这对某人有帮助；D

4

1 回答 1

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"); 
});

jsFiddle在这里

于 2013-07-11T09:37:08.400 回答