html - 创建欢迎面板的简单代码

Question

我想为欢迎页面中的某种菜单创建一个快速面板。我说的是后台面板。也许我想要创建的是类似 Windows 8 地铁磁贴的东西，但要简单得多。

到目前为止我的实验代码是:

<span class="panel">a</span>
<span class="panel">b</span>
<span class="panel">c</span>
<span class="panel">d</span>
<span class="panel">e</span>
<span class="panel">f</span>
<span class="panel">g</span>
<span class="panel">h</span>
<span class="panel">i</span>
<span class="panel">j</span>
<span class="panel">k</span>
<span class="panel">l</span>

我的 CSS 是:

.panel  { 
   width: 300px; 
   height: 300px; 
   background-color: #999; 
   margin: 20px; 
   position:relative; 
}

我设想通过这个实验代码我会得到的是:

• 12 个灰色面板 300x300px，每个面板里面有一个字母，
• 彼此之间相隔 40px，
• 自动排列(意味着它们会像单词一样在右侧排列，就像您在 Windows 资源管理器上看到文件和文件夹的“平铺” View 一样。如果我调整窗口大小，面板将重新排列到底部) .

但问题是我在字母周围设置了与字母大小完全相同的小方框，而不是 300x300 像素。但是它们确实在彼此的右边形成(回流)。如果我将 span 更改为 div，那么它将生成 300x300px 的框，但这些框将垂直形成。如何解决这个困境？谢谢。

Answer 1

<span>标签默认为 inline元素，因此 height和 width属性将不适用于它们。另一方面，<div>标签默认为 block元素，所以当你添加多个 div s 它们占用 100% 的可用宽度，并在另一个下方分配。

要解决这个问题，您需要设置 display作为inline-block .正如值名称所示，它是 inline 的混合体。和 block . block因为你可以给他们分配一个 height和一个 width . inline因为只要可用宽度允许，它们都可以放在同一条线上。如果到达结尾，则将以下元素换行到下一行。

.panel {
    width: 100px;
    height: 100px;
    background-color: #999;
    margin: 20px;
    position:relative;
    display: inline-block; /* to set multiple blocks on same line */
    line-height: 100px; /* vertical center because the box has only one alphabet */
    text-align: center; /* horizontal center */
}

Demo | Display Property - MDN Spec