具有“扩展”项目的响应式网格

时间:2015-02-17 14:07:06

标签: html css

我有一个列表项网格,其中大多数都是超链接,但是当点击显示的子项时,一些项会导致下面的行出现。 我一直试图使网格响应,这样当屏幕宽度变小时,网格变成一列项目。但是我不能保持两种布局的扩展。

可以在以下位置查看有关如何对完整大小的网格起作用的示例:https://jsfiddle.net/au6bq6hj/

我用于网格的HTML是:

<div class="container">
    <ul class="main">
        <li>
            <a href="javascript:void(0);">1.0</a>
        </li>
        <li>
            <a href="javascript:void(0);">2.0</a>
            <ul>
                <li>
                    <a href="javascript:void(0);">2.1</a>
                </li>
                <li>
                    <a href="javascript:void(0);">2.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">3.0</a>
        </li>
        <li>
            <a href="javascript:void(0);">4.0</a>
        </li>
    </ul>
</div>

以下图片详细介绍了我尝试做的事情。第一个图像是扩展前的全宽网格,第二个图像是此网格扩展。第三个图像是扩展前的单列列表,第四个图像是这个,但项目2.0扩展为显示2.1和2.2。

当我有媒体查询使项目全宽时,我显示隐藏行的方法不起作用。 任何帮助都将不胜感激,我想我可能已经走投无路的想法,无法看到下一步该做什么。

Full width grid before expansion Full width grid after expansion Single column before expansion Single column after expansion

1 个答案:

答案 0 :(得分:0)

您可以编写媒体查询,以使li代码的宽度响应。

在这种情况下,假设您希望当屏幕低于400px时列表为单列。接下来是我将在代码末尾添加的内容:

 @media (max-width:400px) {
li{width:90%;}

}

希望这对您的项目有所帮助。