將div放在同一級別-有解無憂

我想知道如何使兩個div對齊？無法將其升高或降低以使其平整。這個。

.crypto-card .value-label{
  width: 100%;
  text-align: right;
  font-weight: 500;
  font-size: .8rem;
}
 .crypto-card .value{
  font-size: 1.5rem;
  font-weight: 100;
  right: -60px;
  top: 4px;
  text-align: left;
}

<div class="value">Ethereum classic</div>
        <div class="value-label"><span class="title">15.29 TH/s</span></div>

}

uj5u.com熱心網友回復：

也許是這樣的？

.crypto-card {
    width: 20rem;
    height: 5rem;
    border: 1px solid black;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
}

.crypto-value-label {
    position: absolute;
    bottom: 10%;
    right: 10%;
}

.crypto-image {
    height: 1rem;
    padding: 0 2rem;
}

<div class="crypto-card">
    <img class="crypto-image" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Ethereum_logo_translucent.svg"/>
    <div class="crypto-name">
        Ethereum classic
    </div>
    <div class="crypto-value-label">
        <span class="title">15.29 TH/s</span>
    </div>
</div>

您可以通過調整來更改標簽的位置

bottom: 10%;
right: 10%;

'.crypto-value-label' 類的。

uj5u.com熱心網友回復：

這是否接近您想要完成的目標？

.flex {
  display: flex;
  align-items: end;
  justify-content: space-between;
  width: 400px;
  padding: 5px;
  border: 1px solid #ccc;
}

.value {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 100;
  padding: 30px 0;
}

.value-label {
  font-weight: 500;
  font-size: .8rem;
}

<div class="flex">
  <div class="value">Ethereum classic</div>
  <div class="value-label"><span class="title">15.29 TH/s</span></div>
<div/>

uj5u.com熱心網友回復：

您只需要將加密卡 div 的顯示設定為 flex，然后將要向下移動的 div 的 align-self 屬性設定為 flex-end。

.crypto-card{
   height:100px;
   border:2px solid green;
   width:100%;
   display:flex;
   justify-content:space-around;
 }
 

.crypto-card .value-label{
  align-self:flex-end;
  text-align: right;
  font-weight: 500;
  font-size: .8rem;
}
.crypto-card .value{
 
  font-size: 1.5rem;
  font-weight: 100;
   
}

<div class= "crypto-card">
    <div class="value">Ethereum classic</div>
    <div class="value-label">
       <span class="title">15.29 TH/s</span>
    </div>
</div>

uj5u.com熱心網友回復：

也可以用css網格來做，你只需要說你想要一個有兩列/行的網格，并且你想要第二行/列中的值標簽。好處是不必弄亂頂部和底部。

<head>
<style>
.crypto-card{
display:grid;
grid-template-columns: max-content max-content;
grid-template-rows: 1fr 1fr
}

.crypto-card .value-label{
  font-weight: 500;
  font-size: .8rem;
  grid-column-start: 2;
  grid-row-start: 2;
}
 .crypto-card .value{
  font-size: 1.5rem;
  font-weight: 100;
}
</style>
</head>
<body>
<div class="crypto-card">
<div class="value">Ethereum classic</div>
        <div class="value-label"><span class="title">15.29 TH/s</span></div>
</div>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/517444.html

標籤：htmlcss

上一篇：彈出div在JSFIddle上完美運行，但不在我的網頁上

下一篇：為什么單擊按鈕后函式不執行？