无论屏幕宽度如何 - 连续的流体贴图数量相同 - CSS / jQuery？ [英] Same number of fluid tiles in a row, no matter the screen width - CSS/jQuery?

问题描述

这就是我得到的结果。我需要有23个正方形的瓷砖，宽度和高度相同，以便覆盖100％的屏幕。到目前为止，它应该是什么样子，但它调整到我的屏幕宽度：
https://www.dropbox.com/s/xi6mb2dpwe5bweo/Screenshot%202014-03-15%2014.40.53.png

我希望在屏幕宽度变大或变小时调整图块大小，以便它们在同一行中保持相同数量（23）。现在他们调整了一点点，但一些瓷砖互相叠加： https://www.dropbox.com/s/sx5er355mro45jy/Screenshot%202014-03-15%2014.54.24.png

这是我的HTML：

 < nav id =tiles> 
< ul> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< / ul> 
< / nav> 
  

这是我的CSS：

  body {
 margin：0px; 
 padding：0px; 
} 
 
 #tiles {
 background：#fff; 
 overflow：hidden; 
 border：2px solid＃185a2a; 
} 
 #tiles ul {
 list-style：none; 
 margin：0px; 
 padding：0; 
} 
 #tiles li {
 float：left; 
背景：#ddd; 
保证金：0; 
 padding：0 0 4.273％0; 
宽度：4.273％; 
职位：亲属; 
 border-top：1px纯白色; 
 border-left：1px纯白色; 
} 
 
 #tiles li a {
 position：absolute; 
} 
  

预先感谢！ ：）

解决方案

您已经将填充应用于列表项。通常情况下，填充宽度不计算为整个宽度。这导致元素中的不希望的中断。
喜欢说每天5次：将它设置为 border-box

  * 
 {
 -moz-box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
 box-sizing：border-box; 
} 
  

http://jsfiddle.net/NicoO/pN5b6/

I need to have 23 square tiles, same width and height, on a row, to cover the screen 100% whatever the device.

This is what I got so far and what it should look like, but it's adjusted to my screen-width: https://www.dropbox.com/s/xi6mb2dpwe5bweo/Screenshot%202014-03-15%2014.40.53.png

I want the tiles to resize when the screenwidth is getting bigger or smaller, so that they stay the same number in a row (23). Right now they resize a little bit, but some tiles fall under each other: https://www.dropbox.com/s/sx5er355mro45jy/Screenshot%202014-03-15%2014.54.24.png

This is my HTML:

<nav id="tiles">
        <ul>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
        </ul>
    </nav>

And this is my CSS:

body {
  margin: 0px;
  padding: 0px;
}

#tiles {
  background: #fff;
  overflow: hidden;
  border: 2px solid #185a2a;
}
#tiles ul {
  list-style: none;
  margin: 0px;
  padding: 0;
}
#tiles li {
  float: left;
  background: #ddd;
  margin: 0;
  padding: 0 0 4.273% 0;
  width: 4.273%;
  position: relative;
  border-top: 1px solid white;
  border-left: 1px solid white;
}

#tiles li a {
  position: absolute;
}

Thanks in advance! :)

解决方案

you have applied a padding to the list item. Normaly the width of the padding is not calculated to the overall width. This leads to the undesired break in the elements. Like it say 5 times a day: set it to border-box

*
{
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/NicoO/pN5b6/

这篇关于无论屏幕宽度如何 - 连续的流体贴图数量相同 - CSS / jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！