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>

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

THX

Answer 1

这是一个例子。我使用背景颜色来显示div而不是笔画的位置。只是为了让我们保持布局好。

以下是您可以执行的操作的链接

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

我把信息div浮动也留下了价格div。