CSS中的全宽列表 [英] Full width list in CSS

问题描述

我想为我的网站实现和新的布局。我能够使用JS实现这个，但我试图使用纯CSS。

I'm trying to implement and new layout for my site. I am capable of implementing this using JS but I'm trying to use pure CSS.

例如 http://tympanus.net/Development/GridLoadingEffects/

它始于3列，您可以调整页面大小，将框大小调整，直到它变得足够小，它变成两列。

It starts out with 3 columns and when you resize the page smaller, the boxes resize until it gets small enough that it turns into two columns.

类似于我想要获得我的水平方形列表图片采用页面的全宽，而正方形的最大宽度为300像素。例如：页面从5列开始，页面的宽度开始缩小，框的宽度也开始缩小。它到达一个点，其中4个300px框将能够适应当前的宽度。

Similar to that I'm trying to get my horizontal list of square images to take full width of the page with the square's max-width being 300px. So for example: the page starts out with 5 columns, the width of the page starts shrinking, the width of the boxes start shrinking as well. It reaches a point where 4 300px boxes will be able to fit into the current width.

我拧紧了和最大宽度和最小宽度，但我我是一个CSS新手，我觉得我错过了一些东西。我已经环顾四周，

I've screwed around with and max-width and min-width, but I'm a CSS novice and I feel like I'm missing something. I've looked around and

任何想法？

推荐答案

可以使用媒体查询为不同的浏览器宽度设置不同的CSS规则。

You can use Media Queries to set differnet css rules for different browser widths.

@media (min-width: 300px) and (max-width: 600px) {
    someClass {
      /* some rules for browser width between 300 and 600px */
    }
}

有关媒体查询的详情：

• ss-tricks.com


• MDN


• selfhtml

• ss-tricks.com
• MDN
• selfhtml

这篇关于CSS中的全宽列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！