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的位置，而不是中风。只是为了让我们保持布局合适。

这里是我已经把信息DIV浮动留下了价格DIV，以及你可以做什么

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

的链接。