Verwirrt auf der horizontalen Karte

Question

Ich habe wirklich Schwierigkeiten gehabt, eine horizontale Karte zu machen. Ich möchte Flexbox nicht verwenden, weil ich nicht sehr erfahren bin. Ich möchte etwas wie folgt aussehen:

Ich habe bereits versucht, machen die Karte und ich bin in der Lage, es zu erhalten ähnlich aussehen, obwohl es nicht richtig in sie eingegeben auf den Text nicht ändern.

Answer 1

Ich würde Ihnen empfehlen, einige grundlegende CSS zu lernen, um einfache Layouts zu machen. Auf jeden Fall ist hier ein einfacher Entwurf:

.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>