基本的CSS我認爲，但仍然不能這樣做 - 試圖將兩個div放在另一個div

已經在這工作了大約兩個小時。我想使這個：基本的CSS我認爲，但仍然不能這樣做 - 試圖將兩個div放在另一個div

enter image description here

這個樣子的：

enter image description here

這裏是我的代碼。我一直在嘗試使用padding-bottom，margin-bottom等，但它只是在問號div（area_help）下面添加像素，並按下了下面的div - 而不是像我希望的那樣在area_help中定位area_help。任何幫助，將不勝感激。謝謝！

HTML/ERB文件（這是一個Rails應用程序，但不要以爲事項）：

<div id="your_area"> 
    <div id = "Address_book_area"> 
    <% if current_resource.name == @resource.name %> 
    <%= "Your Area:" %> 
    <% else %> 
     <% if @resource.is_company? %> 
     <%= "#{@resource.name}" + "'s Area:" %> 
     <% else %> 
     <%= "#{@resource.first_name.capitalize}" + " " + "#{@resource.last_name.capitalize}" + "'s Area:" %> 
     <% end %> 
    <% end %> 
    </div> 


    <div id = "area_help"> 
     <%= image_tag("why_fb_log_in.png") %> 
    </div> 
    </div>

CSS：

#your_area { 
margin-top: 100px; 
margin-left: 240px; 
margin-bottom: 20px; 

#Address_book_area { 
font-size: 28px; 
width: 140px; 
float: left; 
} 

#area_help { 
width: 30px; 
display: inline-block; 
} 

}

來源

2013-10-09 CHarris

你介意將你的CSS和（輸出）HTML加載到JSFiddle中嗎？ –

'vertical-align：baseline; '應該設置內聯塊 – Anthony

Cheers Ryan的元素，但Pekka剛剛回答了我的問題。必須等待7分鐘才能接受它。 Grrrr .... – CHarris

這看起來像在那裏的相對定位是合理的情況下：

#area_help { 
    position: relative; 
    top: -15px 
}

相對定位會移動元素，但會使文檔流保持不變。

來源

2013-10-09 23:22:06

很快。謝謝你的幫助！ – CHarris

基本的CSS我認爲，但仍然不能這樣做 - 試圖將兩個div放在另一個div

回答

相關問題