水平卡混淆

Question

我一直在努力製作水平卡。我不想使用flexbox，因爲我對它不是很有經驗。我想要的東西看起來像這樣：

我已經試圖使該卡，我能得到它的外觀相似，雖然它並沒有正確地調整到它輸入的文本。

Answer 1

我會建議你學習一些基本的CSS爲了做簡單的佈局。反正這裏有一個簡單的草案：

.container { 
 
    margin: auto; 
 
    width: 650px; 
 
    height: 150px; 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 

 
.leftbox, 
 
.rightbox { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 150px; 
 
    vertical-align: middle; 
 
    text-align: left 
 
} 
 

 
.leftbox {} 
 

 
.rightbox { 
 
    border: 2px dashed pink; 
 
    background-color: pink; 
 
    width: 300px; 
 
    height: 146px; 
 
} 
 

 
.header { 
 
    margin: 10px 5px; 
 
} 
 

 
.data>p { 
 
    margin: 5px; 
 
    margin-left: 8px; 
 
} 
 

 
.leftbox { 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG'); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
}

<div class="container"> 
 
    <div class="leftbox"> 
 
    </div><div class="rightbox"> 
 
    <div class="header">CARAMEL MACCHIATO</div> 
 
    <div class="data"> 
 
     <p>SIZE</p> 
 
     <p>TOPPINGS</p> 
 
     <p>DELIVEERY</p> 
 
     <p>AMOUNT</p> 
 
    </div> 
 
    </div> 
 
</div>