得到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>

请参阅小提琴display: inline-block; *当您打开小提琴并将窗口调整到较小的宽度时,div会结束,但会在彼此之下*

有没有办法让蓝色,红色和绿色div在同一条线上,增加高度以适应文本？就像在第一个例子中一样

谢谢

Answer 1

试试这个

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