Question

我想在欢迎页面中为某种菜单创建一个快速面板。这是我正在谈论的后台面板。也许我想要创建的东西就像Windows 8 metro tile，但更简单。

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

<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，
autoflow（意味着它们会像文字一样在右边彼此形成，就像你在Windows资源管理器中看到文件和文件夹的“平铺”视图一样。如果我调整窗口大小，面板将回流到底部）

但问题是我的信件周围的小盒子恰好与字母的大小相反，而不是300x300px。但它们形成彼此的权利（回流）。如果我将跨度更改为div，那么它将生成300x300px的盒子，但盒子将垂直形成。如何解决这个难题？感谢。

Answer 1

<span>标记默认为inline个元素，因此height和width属性不适用于它们。另一方面，<div>代码默认为block元素，因此当您添加多个div时，它们会占用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

创建欢迎面板的简单代码

1 个答案: