Erhalten Sie divs, um die Linie zu füllen und schieben Sie sich nicht gegenseitig

Question

Brauchen Sie Hilfe mit einem Problem, das ich selbst nicht lösen kann.

Ich versuche, ein div zu machen, das ein Menü ist, aber wenn Text zu lang wird, schiebt er die divs nach unten und ich brauche sie, um an Ort und Stelle zu bleiben und stattdessen mehr Höhe zu bekommen.

css:

.menu-item { 
    width: 100%; 
} 

.menu-title { 
    width: 100%; 
    display: block; 
} 
#number { 
    display: inline-block; 
    background: blue; 
    color: #fff; 
} 
#dish { 
    display: inline-block; 
    background: red; 
} 
#price { 
    background: green; 
    display: inline-block; 
} 

.menu-ingredients { 

} 
#ingredients { 

} 

html:

<div class="menu-item"> 
    <div class="menu-title"> 
    <div id="number">23</div> 
    <div id="dish">Souvlaki</div> 
    <div id="price">495 kr</div> 
    </div> 
    <div class="menu-ingredients"> 
    <div id="ingredients">Pizza, hamburger, cucumber, tomato</div> 
    </div> 
</div> 
<div class="menu-item"> 
    <div class="menu-title"> 
    <div id="number">40</div> 
    <div id="dish">RAVIOLI CON PIPIENO DI GRANICHI E RICOTTA AL FINOCCHIO E SALSINA DI ARRAGOSTA 

</div> 
    <div id="price">9000 kr</div> 
    </div> 
    <div class="menu-ingredients"> 
    <div id="ingredients">Ravioli filled with crab and ricotta. Servec with minicucumber and cheese from Gotland. Shrimps toghether with peanuts and pumpkin</div> 
    </div> 
</div> 

See fiddledisplay: inline-block; * Wenn Sie die Geige öffnen und das Fenster zu einer geringeren Breite die divs Ende die Größe, sondern unter jedem andere *

Ist Gibt es eine Möglichkeit, das blaue, rote und grüne div auf derselben Linie zu platzieren und die Höhe stattdessen an den Text anzupassen? Wie im ersten Beispiel

Dank

Answer 1

Versuchen Sie, diese

.menu-title { 
    width: 100%; 
    display: -webkit-flex; 
    display: flex; 
} 

Answer 2

Flexbox (siehe Kopf in den Wolken ‚s Antwort) ist wahrscheinlich die beste Lösung, aber Sie können auch prüfen, indem ein % width (wie 80%) in #dish so (auch Sie können vertical-align:middle; hinzufügen):

.menu-item { 
 
    width: 100%; 
 
} 
 

 
.menu-title { 
 
    width: 100%; 
 
    display: block; 
 
} 
 
#number { 
 
    display: inline-block; 
 
    background: blue; 
 
    color: #fff; 
 
} 
 
#dish { 
 
    display: inline-block; 
 
    background: red; 
 
    width:80%; 
 
    vertical-align:middle; 
 
} 
 
#price { 
 
    background: green; 
 
    display: inline-block; 
 
} 
 

 
.menu-ingredients { 
 
    
 
} 
 
#ingredients { 
 
    
 
}

<div class="menu-item"> 
 
    <div class="menu-title"> 
 
    <div id="number">23</div> 
 
    <div id="dish">Souvlaki</div> 
 
    <div id="price">495 kr</div> 
 
    </div> 
 
    <div class="menu-ingredients"> 
 
    <div id="ingredients">Pizza, hamburger, cucumber, tomato</div> 
 
    </div> 
 
</div> 
 
<div class="menu-item"> 
 
    <div class="menu-title"> 
 
    <div id="number">40</div> 
 
    <div id="dish">RAVIOLI CON PIPIENO DI GRANICHI E RICOTTA AL FINOCCHIO E SALSINA DI ARRAGOSTA 
 

 
</div> 
 
    <div id="price">9000 kr</div> 
 
    </div> 
 
    <div class="menu-ingredients"> 
 
    <div id="ingredients">Ravioli filled with crab and ricotta. Servec with minicucumber and cheese from Gotland. Shrimps toghether with peanuts and pumpkin</div> 
 
    </div> 
 
</div>

Answer 3

versuchen .menu-title { display:flex; }
und #dish { flex-grow: 1; }

fiddle