0

我在一个简单的 HTML 和 CSS 网格中遇到了一个小问题。我有一个由 n 个盒子组成的网格。它可以有任意数量的列，具体取决于浏览器或其父宽度。

将 display 应用于 inline-block 非常简单，如下例所示：

ul {
    list-style: none;
}

ul li {
    width: 100px;
    height: 100px;
    display: inline-block;
    background: #f00;
}​

见http://jsfiddle.net/2nscQ/

但是当有人改变浏览器的宽度时，我希望列数能够平滑过渡。这可能与 CSS 吗？或者有没有好的 jQuery 插件或技巧呢？

示例：http ://www.squarespace.com/templates/

我正在寻找一个非常简单且小型的解决方案。因为我不能为那个小东西添加一个完整的库。我已经在我的应用程序中使用了 jQuery。因此，如果可以使用 CSS 和 jQuery。那会很棒。

4

2 回答 2

0

是的，您可以更改当前浏览器的动态页面。我决定您可以通过$(window).width()在 jQuery 中使用来检查浏览器宽度，并且您可以使用事件处理程序，例如resize()在用户当前更改浏览器宽度时附加浏览器宽度......还有其他事情：当我们在 CSS 中进行时，大多数开发人员会动态设置网站宽度为 100%。

// 这是我添加的 CSS 媒体查询的示例：-

CSS 媒体查询可以通过您能够定义的所有方式添加到 CSS：

第一个示例：当当前页面宽度不高于且低于 480px 时链接特定的 CSS：

我建议您使用第一个示例。我们知道我们可以覆盖 CSS 网格，当浏览器调整大小时，您可以设置很多次，并且使用不同的文件名，您可以创建更多.css文件和链接，如下所示。

<link rel="stylesheet" type="text/css" href="smallscreen.css" media="only screen and (max-width: 480px)" />

第二个示例：在<style>元素中导入样式表：

@import "smallscreen.css" only screen and (max-width: 480px);

第三个示例：<style>作为媒体规则的元素内：

<style type="text/css">
  @media only screen and (max-width: 480px){
    /* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
  }
</style>

...然后当您使用特定浏览器时，您可以使用：

对于谷歌浏览器：

@media screen and (-webkit-animation) {
   div.grid_24 {
     // Webkit only rules 4
 } 
}

火狐：

   @media screen and (max-width:320px;) {        
           div.grid_24 {
           //..
          }
       }

...和歌剧：

 @media all (-o-min-device-pixel-ratio:0) {  
        div.grid_24{  
         //..
    }   // as i know maybe for opera 10 and above

或者您可以为所有人使用：

@media all and (max-width:480px) {
   div.grid_24 {
   //..
  }
}

就这样。如果您想了解有关媒体查询的更多参考，您可以查看w3、htmlGoodies或css-trick

于 2012-11-05T11:44:27.343 回答
0

当然只是使用CSS3 的column-width属性来设置列的宽度（大概它将em作为一个单位而不是px）并将所有li项目放在一个设置了列宽的容器中？

w3schools 示例在我调整浏览器窗口大小时平滑地更改列数。

于 2012-11-06T13:35:42.773 回答