2016-08-09 17 views
-2

私は自分で解決できません。ラインを埋めるためにdivを取得し、お互いを押し下げないでください

私はメニューである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を得るための方法がいくつかあります。最初の例のように

おかげ

+0

ようこそを参照してください.menu-title { display:flex; }
と を試してみてください!コードヘルプを求める質問には、質問自体に** **それを再現するのに必要な最短のコードを含める必要があります**。あなたは[**サンプルまたはサイトへのリンク**]を提供していますが(http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-リンクが無効になる場合、あなたの質問は同じ問題を持つ他の将来のSOユーザには価値がないでしょう。 –

答えて

7

この

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

@ジョナサン、これは必読ですhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

+0

あなたは私が質問を理解することができる前に答えた...私のupvoteを持っているx) – Relisora

+0

リンクには本当に良い情報があります。 ありがとうございます。 /*私は注意する必要があります* / – Jonathan

0

フレキシボックス(頭でクラウドの答えを参照)は、おそらく最良の解決策ですが、あなたはまた、% 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>

0

#dish { flex-grow: 1; }

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

関連する問題