Html 将div中的第一个p放置在高于同一div中的另一个p的位置

我有这个：

但我的目标是做到这一点：

我的代码是：

。奖金分配{
宽度：290px；
高度：29px；
保证金：自动；
垫面：5px；
填充底部：14px；
文本对齐：居中；
背景色：#000；
}
.奖金部门>p{
显示：内联；
高度：29px；
颜色：白色；
字体系列：“Exo 2”，无衬线；
}
.奖金分配>p:最后一个孩子{
字号：500；
颜色：#2ABD77；
字体大小：24px；
}

+40美元奖金

=$24.00

你可以试试这个-

.bonus-div {
  display : flex;
  align-items: center;
}

你可以试试这个-

.bonus-div {
  display : flex;
  align-items: center;
}

您可以使用以下方法：

。奖金分配{
宽度：290px；
高度：29px；
保证金：自动；
垫面：5px；
填充底部：14px；
背景：蓝色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.奖金部门>p{
显示：内联；
颜色：白色；
字体系列：“Exo 2”，无衬线；
}
.奖金分配>p:最后一个孩子{
字号：500；
颜色：#2ABD77；
字体大小：24px；
}

+4美元奖金

=$24.00

您可以使用以下方法：

。奖金分配{
宽度：290px；
高度：29px；
保证金：自动；
垫面：5px；
填充底部：14px；
背景：蓝色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.奖金部门>p{
显示：内联；
颜色：白色；
字体系列：“Exo 2”，无衬线；
}
.奖金分配>p:最后一个孩子{
字号：500；
颜色：#2ABD77；
字体大小：24px；
}

+4美元奖金

=$24.00

这个问题有很多解决方案。我会给你最容易实现的

HTML

<div class='bonus-div'>
    <p>+$4.00 Bonus</p>
    <p> = </p>
    <p>$24.00</p>
</div>

<div class="bonus-div">
  <div class="bonus-div-table">
    <div class="bonus-div-row">
      <div class="bonus-div-cell bonus-div-bonus">
        +$4.00 Bonus
      </div>
      <div class="bonus-div-cell bonus-div-total">
        &nbsp;= $24.00
      </div>
    </div>
  </div>
</div>

---

我的解决方案使用flexbox属性。如果您介意不支持较旧的浏览器，那么就不要使用flexbox。

这个问题有很多解决方案。我会给你最容易实现的

HTML

<div class='bonus-div'>
    <p>+$4.00 Bonus</p>
    <p> = </p>
    <p>$24.00</p>
</div>

<div class="bonus-div">
  <div class="bonus-div-table">
    <div class="bonus-div-row">
      <div class="bonus-div-cell bonus-div-bonus">
        +$4.00 Bonus
      </div>
      <div class="bonus-div-cell bonus-div-total">
        &nbsp;= $24.00
      </div>
    </div>
  </div>
</div>

---

我的解决方案使用flexbox属性。如果您介意不支持较旧的浏览器，请不要使用flexbox。

添加垂直对齐：文本顶部；在css中

<style type="text/css">
.bonus-div {
  width: 290px;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 14px;
  text-align: center;
  background-color:#000;
}

.bonus-div > p {
  display: inline;
  color: white;
  font-family: 'Exo 2', sans-serif;
}

.bonus-div > p:first-child{
    color: #2ABD77;
    font-size: 18px;
    color: white;
    font-family: 'Exo 2', sans-serif;
    vertical-align:text-top;
}
.bonus-div > p:last-child{
  font-weight: 500;
  color: #2ABD77;
  font-size: 24px;
  vertical-align:text-top;
}
</style>
<div class="bonus-div">
   <p>+$4</i>Bonus</p>
   <p>= $24.00</p>
</div>

·奖金司{
宽度：290px；
保证金：自动；
垫面：5px；
填充底部：14px；
文本对齐：居中；
背景色：#000；
}
.奖金部门>p{
显示：内联；
颜色：白色；
字体系列：“Exo 2”，无衬线；
}
.奖金部门>p:第一个孩子{
颜色：#2ABD77；
字号：18px；
颜色：白色；
字体系列：“Exo 2”，无衬线；
垂直对齐：文本顶部；
}
.奖金分配>p:最后一个孩子{
字号：500；
颜色：#2ABD77；
字体大小：24px；
垂直对齐：文本顶部；
}
+40美元奖金

=$24.00

添加垂直对齐：文本顶部；在css中

<style type="text/css">
.bonus-div {
  width: 290px;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 14px;
  text-align: center;
  background-color:#000;
}

.bonus-div > p {
  display: inline;
  color: white;
  font-family: 'Exo 2', sans-serif;
}

.bonus-div > p:first-child{
    color: #2ABD77;
    font-size: 18px;
    color: white;
    font-family: 'Exo 2', sans-serif;
    vertical-align:text-top;
}
.bonus-div > p:last-child{
  font-weight: 500;
  color: #2ABD77;
  font-size: 24px;
  vertical-align:text-top;
}
</style>
<div class="bonus-div">
   <p>+$4</i>Bonus</p>
   <p>= $24.00</p>
</div>

·奖金司{
宽度：290px；
保证金：自动；
垫面：5px；
填充底部：14px；
文本对齐：居中；
背景色：#000；
}
.奖金部门>p{
显示：内联；
颜色：白色；
字体系列：“Exo 2”，无衬线；
}
.奖金部门>p:第一个孩子{
颜色：#2ABD77；
字号：18px；
颜色：白色；
字体系列：“Exo 2”，无衬线；
垂直对齐：文本顶部；
}
.奖金分配>p:最后一个孩子{
字号：500；
颜色：#2ABD77；
字体大小：24px；
垂直对齐：文本顶部；
}
+40美元奖金

=$24.00

您可以使用类似“显示”的表格，以确保无论如何调整字体大小，每个垂直对齐都是自动进行的。我使用了

display:table

及其子属性

display:table row

和

display:table cell

来执行这个技巧。我喜欢这些属性，因为它们现在已经很好地集成在大多数浏览器中（请查看caniuse兼容性表）

JSFiddle：

CSS

.bonus-div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonus-div > p {
    color: white;
    font-family: 'Exo 2', sans-serif;
}

.bonus-div > p:last-child{
    font-weight: 500;
    color: #2ABD77;
    font-size: 24px;
}

.bonus-div {
  width: 290px;
  height: 48px;
  margin: auto;
  text-align: center;
  background-color:#000;
}

.bonus-div-bonus, .bonus-div-total {
  font-family: 'Exo 2', sans-serif;
}

.bonus-div-bonus {
  color : #FFFFFF;
  text-align: right;
}

.bonus-div-total {
  color : #2ABD77;
  font-weight: 500;
  font-size: 24px;
  text-align : left;
}

.bonus-div-table {
  display : table;
  height : 100%;
  width : 100%;
}

.bonus-div-row {
  display : table-row;
}

.bonus-div-cell {
  display : table-cell;
  vertical-align : middle;
}

HTML

<div class='bonus-div'>
    <p>+$4.00 Bonus</p>
    <p> = </p>
    <p>$24.00</p>
</div>

<div class="bonus-div">
  <div class="bonus-div-table">
    <div class="bonus-div-row">
      <div class="bonus-div-cell bonus-div-bonus">
        +$4.00 Bonus
      </div>
      <div class="bonus-div-cell bonus-div-total">
        &nbsp;= $24.00
      </div>
    </div>
  </div>
</div>

+$4.00奖金
= $24.00

您可以使用类似“显示”的表格，以确保无论如何调整字体大小，每个垂直对齐都是自动进行的。我使用了

display:table

及其子属性

display:table row

和

display:table cell

来执行这个技巧。我喜欢这些属性，因为它们现在已经很好地集成在大多数浏览器中（请查看caniuse兼容性表）

JSFiddle：

CSS

.bonus-div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonus-div > p {
    color: white;
    font-family: 'Exo 2', sans-serif;
}

.bonus-div > p:last-child{
    font-weight: 500;
    color: #2ABD77;
    font-size: 24px;
}

.bonus-div {
  width: 290px;
  height: 48px;
  margin: auto;
  text-align: center;
  background-color:#000;
}

.bonus-div-bonus, .bonus-div-total {
  font-family: 'Exo 2', sans-serif;
}

.bonus-div-bonus {
  color : #FFFFFF;
  text-align: right;
}

.bonus-div-total {
  color : #2ABD77;
  font-weight: 500;
  font-size: 24px;
  text-align : left;
}

.bonus-div-table {
  display : table;
  height : 100%;
  width : 100%;
}

.bonus-div-row {
  display : table-row;
}

.bonus-div-cell {
  display : table-cell;
  vertical-align : middle;
}

HTML

<div class='bonus-div'>
    <p>+$4.00 Bonus</p>
    <p> = </p>
    <p>$24.00</p>
</div>

<div class="bonus-div">
  <div class="bonus-div-table">
    <div class="bonus-div-row">
      <div class="bonus-div-cell bonus-div-bonus">
        +$4.00 Bonus
      </div>
      <div class="bonus-div-cell bonus-div-total">
        &nbsp;= $24.00
      </div>
    </div>
  </div>
</div>

+$4.00奖金
= $24.00