圖像內的位置div（響應）

我有一個問題（很明顯）。我必須定位一個元素始終在圖像的右側。但我不能使用img-Tag作爲容器。另外我使用引導程序，這使得無法爲容器設置固定寬度。圖像內的位置div（響應）

<div id="container" class="col-lg-3"> 
    <div class="positioning"> 
     Some Text 
    </div> 
    <img src="http://placehold.it/300x200/eeeeee" /> 
</div>

我希望這是可以理解的

編輯： 基本上我想要的形象表現得就像一個容器，而不使用「背景圖片」

來源

2014-12-02 AlexG

類似於[jsfiddle]（http://jsfiddle.net/mzd7maqq/1/）？ – Last1Here 2014-12-02 15:44:40

您是否需要使用img標籤，或者您可以將div的背景設置爲圖像？ – lukevp 2014-12-02 15:46:02

@lukevp認爲你必須使用圖像標記使div在調整大小時保持圖像的高度 – Pete 2014-12-02 15:53:33

裹的圖像和一個div標題與position: relative想在這個Fiddle

HTML

<div id="container" class="col-lg-3"> 
    <div class="img-container"> 
     <div class="positioning"> 
      Some Text 
     </div> 
     <img src="http://placehold.it/300x200/eeeeee" /> 
    </div> 
</div>

CSS

.col-lg-3{ 
    width: 25%; 
    min-width: 230px; 
    float: left; 
    position: relative; 
    min-height: 1px; 
    padding-left: 15px; 
    padding-right: 15px; 
    background-color: #aaa; 
    text-align: center; 
} 
.col-lg-3 img { 
    max-width: 100%; 
} 
.img-container { 
    display: inline-block; 
    position: relative; 
} 
.positioning{ 
    position: absolute; 
    right: 15px; 
    bottom: 22px; 
    background-color: red; 
    color: white; 
    padding: 4px; 
    font-size: 17px; 
    line-height: 18px; 
}

來源

2014-12-02 16:11:34 Last1Here

謝謝，作品像一個魅力！如此簡單 – AlexG 2014-12-02 16:35:33

如果你接受並喜歡這個人，你應該高舉這個人的回答！我也贊成，因爲這是公認的答案，你對此感到滿意。 – lukevp 2014-12-02 19:24:50

嗯，我不能upvote atm，我沒有足夠的聲譽去做現在x） – AlexG 2014-12-03 13:44:00

我認爲<figure>標籤是最好的解決方案。

這裏是個例：http://jsfiddle.net/mzd7maqq/7/

來源

2014-12-02 16:05:23 Jonnefoy

與div相同的問題，「某些文本」元素被定位到該圖上，調整窗口大小。 – AlexG 2014-12-02 16:10:43

在這種情況下，只需將'

'顯示爲內聯塊 [http：// jsfiddle。net/mzd7maqq/7 /] 與@ Last1Here的答案相同，但它對HTML5友好:) – Jonnefoy 2014-12-02 16:46:52

可以使用float屬性並將其設置爲正確的。

style="float:right";

來源

2014-12-02 16:08:01 3Demon

不幸的是，沒有那麼簡單，浮動將其再次定位到錯誤的容器 – AlexG 2014-12-02 16:12:23

一個絕對定位的元素總是被定位在與它的父母有關的位置：相對的位置上。下面是一個很好的例子http://learnlayout.com/position.html

所以如果你把div和內容包裹在一個div裏並且把它放在相對位置，那麼你可以把它的內容放在裏面。然後，你只需要顯示：block;和寬度100％，所以會填滿整個容器。

.container { 
    position: relative; 
} 
.container img { 
    display: block; 
    width: 100%; 
} 
.container .content { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
}

下面是一個例子：http://jsfiddle.net/kbzvyjy9/

希望可以解決您的問題。

來源

2014-12-02 16:54:37 sdjn

圖像內的位置div（響應）

回答

相關問題