Question

所以我已经进行了几年的网络开发，所以我通常可以理解大多数错误以及如何修复它们，但是最近我在尝试创建响应式网站的时候感到困惑，这些网站的百分比似乎不起作用我也想要他们。

我遇到的问题是我有一个3 x 2网格，它占据整个屏幕的100％（1920 x 1080），宽度设置为33.3％，高度为50％，它们保持在使用显示内联属性的行。

但是在调整浏览器大小时，右边的最后一个图块会被按下（就像它们会修复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

在你的CSS中你需要设置box-sizing属性（需要-moz-前缀，-webkit-如果你想支持Android＆lt; 4.0）。我发现为所有元素设置它很有帮助，但你可能不希望得到这个结果。

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

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

如果您不想在所有元素上使用此功能，请将响应区域设置为此大小调整属性。接下来，如果您的元素有边距，它们仍然在框外。您需要将保证金设置为0，或者如果您想要保证金，请使用百分比。玩数字，但我建议宽度为31％，保证金为1％，或者宽度为32％，保证金为0.5％。使用(2*margin)+width时，这些数字应最多为33％。

你可能想要考虑一个你可以从很多地方获得的“normalize.css”。请注意，并非所有都是相同的。在Google上搜索此内容并阅读不同的实现。另一种可能的考虑因素是Lemonade CSS，请参阅下面的链接。您会注意到CSS的第一个示例块包含框大小调整属性。

http://webdesign.tutsplus.com/articles/build-a-freshly-squeezed-responsive-grid-system--webdesign-14888

Answer 2

inline-block，空格很重要。要解决此问题，您可以删除html中的空格。 jsfilddle

<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 3

我认为这个问题的原因与内联块显示样式有关。使用内联块时，元素之间有内联或内联块样式的空格。这就像你在单词之间有空格一样。您可以通过设置＆＃39; main_page_holder＆＃39;的字体大小来解决此问题。到0;

Answer 4

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

Demo using Float

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

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

3x2网格，CSS百分比不起作用

4 个答案:

Demo using Float

Updated demo