Same number of fluid tiles in a row, no matter the screen width - CSS/jQuery?

问题

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! :)

回答1:

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/

来源：https://stackoverflow.com/questions/22425006/same-number-of-fluid-tiles-in-a-row-no-matter-the-screen-width-css-jquery

标签

html

css

fluid