如何2個DIV之間的定位的圖像

我有兩個DIV，一個在另一個內部等的底部之間的定位的圖像：如何2個DIV之間的定位的圖像

example

在這個例子中的代碼是：

<div style="background:blue;width:500px;height:150px;overflow:hidden;"> 
    <div style="background:red;width:500px;height:100px;margin-top:20px;"> 
    //DOES IMAGE GOES HERE? 
    </div> 
</div>

我知道，絕對的位置，我可以在那裏定位圖像..但我不喜歡那種定位..有沒有另一種方式？謝謝！！！

來源

2012-07-12 JackTurky

完整的CSS樣本

.blue { 
 
    background: blue; 
 
    width: 500px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 

 
.red { 
 
    background: red; 
 
    width: 500px; 
 
    height: 100px; 
 
    margin-top: 20px; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    position: absolute; 
 
    bottom: -10px; 
 
    /* half of image height */ 
 
    right: 10px; 
 
    /* right space */ 
 
} 
 

 
.image img { 
 
    display: block; 
 
    width: 100px; 
 
    height: 20px; 
 
    background: green; 
 
}

<div class="blue"> 
 
    <div class="red"> 
 
    <div class="image"> 
 
     <img src="" alt="" /> 
 
    </div> 
 
    </div> 
 
</div>

來源

2012-07-12 05:33:20 GTSouza

試試這個：

<div style="background:blue;width:500px;height:150px;overflow:hidden;"> 
    <div style="background:red;width:500px;height:100px;margin-top:20px; 
       padding-left: 250px ; padding-top: 50px"> 
    //IMAGE GOES HERE. 
    </div> 
</div>

填充將有助於留出空間。

來源

2012-07-12 05:28:30

我曾在內部DIV如果你在內部的div其他元素，那麼請分享加價結構 – JackTurky 2012-07-12 05:30:15

其他元素，所以我們可以找出合適的標籤在其內IMG標籤可以放置。 – 2012-07-12 05:36:03

嘿，現在習慣了這種

.parent{ 
background:blue; 
    width:500px; 
    height:150px; 
    overflow:hidden; 
} 
.child{ 
background:red; 
    width:500px; 
    height:100px; 
    margin-top:20px; 
    position:relative; 
} 
.child img{ 
position:absolute; 
    bottom:-25px; 
    right:6%; 
    width:200px; 
    height:50px; 
}

.parent{ 
 
background:blue; 
 
    width:500px; 
 
    height:150px; 
 
    overflow:hidden; 
 
} 
 
.child{ 
 
background:red; 
 
    width:500px; 
 
    height:100px; 
 
    margin-top:20px; 
 
    position:relative; 
 
} 
 
.child img{ 
 
position:absolute; 
 
    bottom:-25px; 
 
    right:6%; 
 
    width:200px; 
 
    height:50px; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <img src="http://fakeimg.pl/250x100/"> 
 
    </div> 
 
</div>

來源

2012-07-12 05:30:06

它工作的很好！我編輯底部0px，所以它是在兩個div之間居中..但..（我在13英寸的屏幕大小），如果我看到一個更大的屏幕？可以嗎？ – JackTurky 2012-07-12 05:35:46

的最好的是：

HTML

<div style="background:blue;width:500px;height:150px;overflow:hidden;"> 
    <div style="background:red;width:500px;height:100px;margin-top:20px;position:relative;"> 
    <img src="" style="position:absolute;bottom:-10px;" /> 
    </div> 
</div>

我已添加絕對定位。

JSFIDDLE

來源

2012-07-12 05:32:22

你可以試試下面的代碼

<div style="background:blue;width:500px;height:150px;overflow:hidden;"> 
    <div style="background:red;width:500px;height:100px;margin-top:20px;"> 
    </div> 
    <img src="imageNemaHere" width="134" height="28" style="float:right; margin:-10px 10px 0 0" /> 
</div>

來源

2012-07-12 05:33:45

什麼position:relative

<div style="background:blue;width:500px;height:150px;overflow:hidden;"> 
    <div style="background:red;width:500px;height:100px;margin-top:20px;"> 
    <img src="http://placehold.it/80x40" style="position:relative;left:400px;top:80px"> 
    </div> 
</div>

http://jsfiddle.net/ABEne/

來源

2012-07-12 05:37:17 Musa

如何2個DIV之間的定位的圖像

回答

相關問題