无论屏幕宽度如何，连续相同数量的流体图块 - CSS/jQuery？答案

【问题标题】：Same number of fluid tiles in a row, no matter the screen width - CSS/jQuery?无论屏幕宽度如何，连续相同数量的流体图块 - CSS/jQuery？
【发布时间】：2014-04-20 22:12:18
【问题描述】：

我需要在一行上放置 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;
  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;
}

提前致谢！ :)

【问题讨论】：

标签： html css fluid-layout

【解决方案1】：

您已对列表项应用了填充。通常，填充的宽度不计算为总宽度。这会导致元件出现不希望的断裂。喜欢每天说 5 次：设置为 border-box

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

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

【讨论】：