css 如何在形状的左上角/右上角将带有数字的大文本放在小文本旁边？

0ve6wy6x 于 2022-12-27 发布在其他

关注(0)|答案(3)|浏览(248)

下面是我正在使用的代码：

ul {
    color: beige;
    margin-left: 25%;
    margin-right: 25%;
  }

<li class="list-group-item px-3 border-0 rounded-3 mb-2" style="background-color: #8A8583;">
  <div class="row">
      <div class="col-md-6" style="justify-content: center;">
          <h2 style="color: beige; font-weight: bold; margin: auto;">I also code lots of      side-projects that are either websites or applications using a wide variety of languages.</h3>
      </div>
      <div class="col-md-6"><h1 style="font-size: 7rem;">03</h1></div>
  </div>
</li>

它会创建一个包含文本和所有内容的形状，但我希望它看起来更像

。
我怎样才能把较大的数字移到左上角呢？
我试过floating: left、floating: right和删除justify-content: center，但没有任何效果。我希望在删除这些内容时它会恢复到列的中间左侧，但不幸的是什么也没有发生。即使添加一些类似pull-right的内容似乎也没有效果。

css

来源：https://stackoverflow.com/questions/74916750/how-to-place-large-text-with-numbers-next-to-smaller-text-in-the-top-left-right

3条答案

按热度按时间

r3i60tvu1#

您需要检查flex及其属性，例如justify-contenthere
您可以简单地创建相同的在这个片段中我没有：

.items {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-radius: 50px;
            background-color: #8A8583;
            padding: 20px 40px;
        }

        .items .left {
            width: 70%;
        }

        .items .left h3 {
            /* text-align: justify; */
        }

        .items .right h1 {
            font-size: 70px;
        }

<div class="items">
        <div class="left">
            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi modi, iste odit delectus vitae, dignissimos iusto non mollitia quae ipsum repellendus nobis doloremque esse blanditiis! Maiores vitae officia iusto inventore.</h3>
        </div>
        <div class="right">
            <h1>03</h1>
        </div>
    </div>

赞(0）回复(0）举报 2022-12-27

velaa5lx2#

您可以在容器上使用display: flex来实现这一点，还可以向左列添加边距，并从h1中删除边距，如下所示：

ul {
    color: beige;
    margin-left: 25%;
    margin-right: 25%;
  }

<li class="list-group-item px-3 border-0 rounded-3 mb-2" style="background-color: #8A8583;">
  <div class="row" style="display: flex">
      <div class="col-md-6">
          <h2 style="color: beige; font-weight: bold; margin: auto; margin-right: 50px;">I also code lots of      side-projects that are either websites or applications using a wide variety of languages.</h3>
      </div>
      <div class="col-md-6"><h1 style="font-size: 7rem; margin: 0">03</h1></div>
  </div>
</li>

赞(0）回复(0）举报 2022-12-27

bbuxkriu3#

为了使用justify-content属性，元素还必须是display: flex（或display: inline-flex）。
row类的CSS是什么？它似乎没有将这两个元素保持在一行上。这就是我要应用flex的地方。尝试将该行设置为display: flex。您可能还需要在第二列上设置text-align: right。
justify-content: center似乎是第一列的错误值，因为设计是左对齐的。
试试这样

<div style="display:flex; justify-content: space-between;">
  <div class="col-md-6">
      <h2 style="color: beige; font-weight: bold; margin: auto;">I also code lots of      side-projects that are either websites or applications using a wide variety of languages.</h3>
  </div>
  <div class="col-md-6" style="text-align: right;">
    <h1 style="font-size: 7rem;">03</h1>
  </div>
</div>

赞(0）回复(0）举报 2022-12-27

我来回答

css 如何在形状的左上角/右上角将带有数字的大文本放在小文本旁边？

3条答案

相关问题

热门标签

最新问答