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