Question

我需要有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;
}

提前致谢！：）

Answer 1

您已将填充应用于列表项。通常，填充的宽度不是根据总宽度计算的。这导致元件中的不期望的断裂。就像它每天说5次：将其设置为border-box

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

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

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

1 个答案: