定位<img>元素

-3

我已經嘗試了多種東西，但沒有在所需的位置放置<img>。它總是卡在兩個跨度之間。試圖img從孩子div img並將其添加到父div。但沒有運氣。我想把它放在我的跨度之下，並且與padding-top:20px;。這張圖片是一張200x38px的圖片。這裏是我的代碼：定位<img>元素

HTML

<div class="col1-step2"> 
      <div class="heading-step2"> 
      <span class="heading-step2">Hello signed User.</span> 
      <span class="heading-step2 textblue">How are you doing.</span> 
      <img class="user-bar" src="<?php echo site_url('img/bar.png'); ?>"> 
      </div> 
</div>

CSS

.col1-step2 { 
    float: left; 
    width: 40%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.8); 

} 
div.heading-step2 { 
    top: 6%; 
    position: relative; 
} 

.heading-step2 { 
    font-size: 24px; 
    color: #f7f7f7; 
} 
.heading-step2 .textblue { 
    color: #55c7fa; 
    font-weight: bold; 
    display: block; 
} 
img.user-bar { 
    position: absolute; 
    padding-top: 25%; 
}

來源

2013-03-25 Himanshu Yadav

想要的定位是什麼？ – Sharlike 2013-03-25 20:28:07

要放置它的位置 – 2013-03-25 20:28:53

編輯我的問題。我希望它下面的跨度與20px的填充。 – 2013-03-25 20:33:06

你有相對和絕對定位的混合。通過消除圖像上的絕對定位和調整HTML就可以得到不同的元素排序：

http://jsfiddle.net/HhbQB/1/

<div class="col1-step2"> 
    <div class="heading-step2"> 
     <span class="heading-step2">Hello signed User.</span> 
     <img class="user-bar" src="http://placehold.it/200x100" /> 
     <span class="heading-step2 textblue">How are you doing.</span>  
    </div> 
</div>

更新小提琴響應您的評論：http://jsfiddle.net/HhbQB/2/

來源

2013-03-25 20:28:49 isherwood

刪除郵件後：來自.user-bar的相對位置，圖像位於下一行。但填充頂部：25％不起作用。 – 2013-03-25 21:04:06

它在我發佈的兩個小提琴中都適合我。 – isherwood 2013-03-25 21:06:45

難道是因爲父div被嵌套在其他div中？ – 2013-03-25 21:11:47

你可以給相對或絕對位置到你的div，如果你需要幫助，然後嘗試給你想要div的位置。

來源

2013-03-25 20:32:04

定位<img>元素

回答

相關問題