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/

的鏈接。