ラインを埋めるためにdivを取得し、お互いを押し下げないでください

Question

私は自分で解決できません。

私はメニューであるdivを作ろうとしていますが、テキストが長すぎるとdivを押し下げてしまいます。

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; *あなたがフィドルを開き、小さい幅のdiv端にウィンドウのサイズを変更するが、それぞれの下にその他*

Is同じ行に青色、赤色、緑色のdivを得るための方法がいくつかあります。最初の例のように

おかげ

Answer 1

この

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

Answer 2

フレキシボックス（頭でクラウドの答えを参照）は、おそらく最良の解決策ですが、あなたはまた、% width（などを追加することを検討してお試しくださいそのような#dish中80％）（また、あなたがvertical-align:middle;を追加することができます）：

.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

は#dish { flex-grow: 1; }

がスタックオーバーフローにfiddle