我想为欢迎页面中的某种菜单创建一个快速面板。我说的是后台面板。也许我想要创建的是类似 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 的框,但这些框将垂直形成。如何解决这个困境?谢谢。
最佳答案
<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 */
}
关于html - 创建欢迎面板的简单代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25104411/