Question

我正在开发一个personal website，目前处于非常粗糙的状态。我正致力于改善网站的风格。

我使用名为grid.css的文件完成并设置了顶行，我的名字和导航栏的样式，可以在网站的源代码中看到。我从teamtreehouse.com的“构建一个简单的网站”教程中获取了该文件，因为我认为实现该网格很容易。出于某种原因，网格完美地适用于顶行，我的名字跨越3列，导航栏跨越9，但是当我对图像和“关于我”模糊执行相同的划分时，模糊下降到下一行。为什么？

相关代码如下：

<div class="grid_3">
    <img src="img/JayantSani.jpg" width="75%" height="75%" alt="Jayant Sani">
</div>
<div id="about" class="grid_9 omega">
    <h2>About Me</h2>
    <p>Hi there! I'm Jayant Sani. I'm currently a freshman at Harvard University interested in      studying computer science. I expect to graduate in 2017. I like traveling, sports, and developing web and mobile apps.</p>  
</div>

grid_（数字）类来自grid.css文件，可通过查看上面链接的网站来源访问。

提前感谢您的帮助。

Answer 1

第一个<div class="grid_3">在broswer中的计算高度为37像素，而左边的菜单的计算高度为20px。

你的第二个网格3（图像）漂浮在20px下方。因为它没有明确的：左css规则应用它是绘制在第一个grid_3的右侧。最近发布的代码的解决方案是......

<div class="grid_3" style="clear:left">
    <img src="img/JayantSani.jpg" width="75%" height="75%" alt="Jayant Sani">
</div>

您使用了teamtreehouse.com的术语CSS网格系统进行布局，而不是您的错，但引起了我的WTF响应。

http://caniuse.com/css-grid CSS网格是CSS3的新功能，浏览器尚不支持。

<style type="text/css">
  #grid {
    display: grid;

    /* Two columns: the first sized to content, the second receives
     * the remaining space, but is never smaller than the minimum 
     * size of the board or the game controls, which occupy this 
     * column. */
    grid-template-columns: auto minmax(min-content, 1fr);

    /* Three rows: the first and last sized to content, the middle 
     * row receives the remaining space, but is never smaller than 
     * the minimum height of the board or stats areas. */
    grid-template-rows: auto minmax(min-content, 1fr) auto
  }

  /* Each part of the game is positioned between grid lines by 
   * referencing the starting grid line and then specifying, if more 
   * than one, the number of rows or columns spanned to determine 
   * the ending grid line, which establishes bounds for the part. */
  #title    { grid-column: 1; grid-row: 1 }
  #score    { grid-column: 1; grid-row: 3 }
  #stats    { grid-column: 1; grid-row: 2; justify-self: start }
  #board    { grid-column: 2; grid-row: 1 / span 2; }
  #controls { grid-column: 2; grid-row: 3; align-self: center }
</style>

更新最简单的CSS编码。

将此CSS规则添加到任何CSS文件中，您需要查看许多CSS文件。

*[nextrow] {
   clear:left;
}

当您想要转到下一行时，请将其用作属性。

<div class="grid_3" nextrow>

用于布局的CSS网格系统

1 个答案: