html - CSS 百分比不起作用的 3x2 网格

Question

所以我已经从事网络开发几年了，所以我通常可以理解大多数错误以及如何修复它们，但最近我在尝试创建响应式网站时感到困惑，因为百分比似乎不起作用我也很喜欢他们。

我遇到的问题是我有一个 3 x 2 的网格，它占据了整个 100% 的屏幕 (1920 x 1080)，宽度也设置为 33.3%，高度为 50%，它们被固定在使用显示内嵌属性的行。

但是当调整浏览器大小时，右侧的最后一个图 block 被向下推(就像元素固定 px 并且没有足够空间时那样)，我想知道如何解决这个问题。

这是我的 CSS:

  #main_page_holder {
  width: 100%;
  height: 100%;
 }

#home_navigation_link {
  width: 33.3%;
  height: 50%;
  display: inline-block;
  background-color: #f2f2f2;
}

这是我的 HTML

<div id="main_page_holder">

            <div id="home_navigation_link">
               1
            </div>

            <div id="home_navigation_link">
               1
            </div>

            <div id="home_navigation_link">
               1
            </div>

            <div id="home_navigation_link">
               1
            </div>

            <div id="home_navigation_link">
               1
            </div>

            <div id="home_navigation_link">
               1
            </div>

        </div>

Answer 1

display:inline-block 受实际 HTML 结构中空白的影响。删除空格或使用 float: left

Demo using Float

此外，如果您希望您的网格框实际填充屏幕的 50%，您需要将 height: 100% 应用于 body/html

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

Updated demo