使用 CSS 在大文本旁边格式化小文本答案

【问题标题】：Formatting small text next to large text using CSS使用 CSS 在大文本旁边格式化小文本
【发布时间】：2021-04-11 19:42:19
【问题描述】：

我一直试图在这个大标题旁边放置一个较小的传记风格文本，但我似乎找不到解决方案。我尝试了几种方法，例如 float:left 和 float:right 以及 display:flex。我提供了我的代码和文本所在的当前容器的屏幕截图。

-我的css

.toptext{
    float: left;
    text-align: left;
    font-weight: bold;
    font-size: 250px;
    height: 0%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.biotext{
    float:right;
    font-weight: bold;
    font-size: 15px;
    height: 0%;
    overflow: hidden;
    text-overflow: ellipsis;
}

-我的html

 <div class="container-fluid bg-2">
        <h1 class="biotext">This site serves as a creative outlet and condensed center for those things that interest
            my unique sneaker collection, and my adoration for gaming that I spread through several social mediums.
        </h1>
        <h1 class="toptext">Hi, I'M</h1>
        <h1 class="toptext">ANDREW.</h1>
    </div>

the result

【问题讨论】：

请在您的帖子中添加代码sn-p，以更好地帮助读者回答您的问题。
把你的代码放在引号里，比如``` code ```

标签： html css text alignment

【解决方案1】：

尝试更改顶部文本的大小

【讨论】：

【解决方案2】：

h1 的属性默认为'display:block'。所以你需要改变它。

-css

.toptext{
   
    display:inline-block;
    text-align: left;
    font-weight: bold;
    font-size: 250px;
    height: 0%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.biotext{
    display:inline-block;
    font-weight: bold;
    font-size: 15px;
    height: 0%;
    overflow: hidden;
    text-overflow: ellipsis;
}

【讨论】：