时间戳

首页 > 解决方案 > 关于html中位置的一些问题

html - 关于html中位置的一些问题

问题描述

怎么可能用纯 html/css 做一些类似的事情，将两个单词放在另一个单词的旁边，放在一个大单词的一边？（我知道使用 boostrap 网格系统是可能的，但我想知道纯 html），此外，这样做并且能够自由地向下或向上移动三个单词？

此外，如何让一个元素进入另一个元素？（因为有些字体上面有一些大的边框，然后你不能因为这个边框让另一个单词彼此靠近）

标签： htmlcssfloating-pointpositioning

解决方案

您可以使用多个div和一个 flexbox 执行此操作，并将它们封装到容器 div 中。我还添加了align-items: center;以使它们并排居中。看看我在这里做了什么：

.container{
  display: flex;
  align-items: center;
}

.bigword {
  font-size: 80px;
}
<div class="container">
  <div class="smallcontainer">
    <div class="smallword">Small1</div>
    <div class="smallword">Small2</div>
  </div>
<div class="bigword">BigWord</div>
</div>

推荐阅读