使用绝对位置实现四种简单布局

Question

我正在尝试获得四种不同的布局，一些文本左侧，右侧，上方或下方的另一位文本。

我有这段代码：

<div>
  <span class="icon">H</span>
  <span class="text">Hello</span>
</div>

然后这个CSS

div { background: grey; position: absolute;}
.icon {font-family: calibri; position: absolute;}
//.text {padding-left: 15px;} .icon {left: 0;} // Icon left of text
//.text {padding-right: 15px;} .icon {right: 0;} //Icon right of text
//.text { padding-top: 15px; } .icon {top: 0;} // Icon top of text
//.text { padding-bottom: 15px; } .icon {bottom: 0;} // Icon bottom of text

然后，取决于我取消注释的最后四行中的哪一行应该确定图标文本相对于主文本的位置。但是，它似乎不起作用，我只能真正实现“文字左侧的文字”位置。

任何人都可以解释我的错误。

Answer 1

您有两个影响输出的问题：

不正确的评论

CSS仅支持/**/条评论，而不支持//，这意味着浏览器感到困惑，正在实施/忽略规则。

.text和.icon是inline元素

.text和.icon是span s，默认情况下会生成inline个元素。 inline元素不支持top和bottom padding，因此您的顶部和底部规则不会产生预期效果。可以通过改为.text和.icon block元素来解决此问题。

div {
  background: grey;
  position: absolute;
}
.icon {
  font-family: calibri;
  position: absolute;
}
span {
  display: block;
}

.left {
  top: 0;
}
.left .text {
  padding-left: 15px;
}
.left .icon {
  left: 0;
}

.right {
  top: 3em;
}
.right .text {
  padding-right: 15px;
}
.right .icon {
  right: 0;
}


.top {
  top: 6em;
}
.top .text {
  padding-top: 15px;
}
.top .icon {
  top: 0;
}


.bottom {
  top: 9em
}
.bottom .text {
  padding-bottom: 15px;
}
.bottom .icon {
  bottom: 0;
}

<div class="left">
  <span class="icon">H</span>
  <span class="text">Hello</span>
</div>
<div class="right">
  <span class="icon">H</span>
  <span class="text">Hello</span>
</div>
<div class="top">
  <span class="icon">H</span>
  <span class="text">Hello</span>
</div>
<div class="bottom">
  <span class="icon">H</span>
  <span class="text">Hello</span>
</div>