html布局 - 打破div

Question

我不是全职 html 人员，但需要让它正常工作(比如 5%)。我有以下布局，如下所示:

我不希望价格与顶部齐平，我在这里使用信息:Div collapse when using float .

我有:

.menu-item {
    border: 1px solid green;
}
.depth-1 {
    margin-left: 10px;
}

.depth-2{
  margin-left: 20px;
}

.menu-item  .info{
  width:400px;
}

.menu-item .info .header {
    border: 1px solid orange;
}

.menu-item .info .detail {
    border: 1px solid red;
}

.menu-item .price {
    float: right;
    width: 150px;
}


<div class="menu-item">
  <div class="info">
    <div class="depth-1 header">wakame-hijiki seaweed salad</div> 
    <div class="depth-1 detail">cucumber / carrot / daikon / apple  || cucumber / carrot / daikon / apple / ginger dressing || cucumber apple / ginger dressing</div> 
  </div>
  <div class="price">9.0</div>
  <div style="clear:both;height:1px;overflow:none;"></div>


</div>

如何调整布局以使价格与顶部齐平？

谢谢

Answer 1

这是一个例子。我使用背景颜色来显示 div 的位置而不是描边。只是为了确保我们保持布局正常。

这是您可以做什么的链接

http://jsfiddle.net/etienne_carre/nX2Qf/

我也将信息 div 和价格 div 一起 float 。