Question

我有一个带有2列的ul，但我想要做的是如果浏览器扩展到一定大小，则将其设为3列。（例如，我有一个23英寸的显示器，如果我的屏幕完全展开，我想要三列）可以用CSS或其他方式完成吗？

我的css看起来像这样

.search-results {
padding: 10px 0 20px 20px;
border: 3px solid black;
height: 100%;
}

ul{
width:100%;
list-style-type: none;
height: 100%;
background-color: pink;
}

li{
background:green;
float:left;
height:250px;
margin:0 10px 10px 0;
width:45%;
}

li:nth-child(even){
margin-right:0;
}

这是html

<div class="search-results">
        <ul>
            @foreach (var gift in Model)
            {
                <li>
                    @gift.Name
                </li>
            }
        </ul>
    </div>

Answer 1

您是否尝试使用CSS media queries？

当您想要管理一些响应内容时，这是非常常见的策略。

普通屏幕：

li {
    width:45%;
}

超过1200px宽屏：

@media (min-width: 1200px) {
    li {
        width:25%;
    }
}

如何动态更改ul中的列数

1 个答案: