文字放在圖像是否存在與否

我想，如果在數據庫或同一位置存在，如果不存在，它在圖像放置文本。文字放在圖像是否存在與否

問題現在面臨的是，如果有一個形象，文雲在其下方，如果它不存在，文字的推移格蘭正確的位置上附加的圖片說明。代碼如下：

<div class="category"> 
    <img src="home.php?cat={$mc.categoryid}"/> 
    <div class="title"> 
     <h2>Some text</h2> 
    </div> 
</div>

我想要做的線沿線的東西：

<style> 
.category{ 
    width: 400px; 
    height: 400px 
} 

.title { 
    position: relative; 
    top: 3px; 
    left: 0; 
    width: 100%; 
    height: 50px; 
} 
</style>

來源

2013-04-26 Ka Ra

確保兩個圖像和文本有position:absolute和.category具有position:relative，與文字的z-index高於圖片的文字。

來源

2013-04-26 01:53:06 imsky

圖像不需要'位置：absolute'，使這項工作。 – daamsie 2013-04-26 04:09:07

@daamsie這是真的 – imsky 2013-04-26 17:02:28

給你的貨櫃category a position的relative。然後給position的absolute至.title。 position:absolute將所分配的任何內容都取出正常的內容流。容器上的position:relative;將保留該空間內的position:absolute元素。但是你仍然可以將它移動到你想要的位置。所以，如果你想擁有.title出現在右下角，適用的風格，如right:0和bottom:0

Fiddle

來源

2013-04-26 01:53:58

-1

有這樣做的不止一種方法。

方法1.將像這樣的「類別」 DIV「稱號」外：

<div class="category"> 
    <img src="home.php?cat={$mc.categoryid}"/> 
</div> 
<div class="title"> 
    <h2>Some text</h2> 
</div>

方法2包括另一DIV中的圖像，並給一個固定的寬度和高度是這樣的：

<div class="category"> 
    <div style="width:xx; height:yy;"> 
     <img src="home.php?cat={$mc.categoryid}"/> 
    </div> 
    <div class="title"> 
     <h2>Some text</h2> 
    </div> 
</div>

在上面，你這取決於你想要多少來分配的圖像使用您自己的值XX和YY。當然，它不一定是內聯CSS。你可以給它另一個班。

來源

2013-04-26 01:59:42 itsols

以'.title'出正常流動將導致文本始終低於，當他想要的文字永遠是畫面 – 2013-04-26 02:24:03

@CodyGuldner上面如果你拿了努力瞭解他的問題，他的「正確的位置」低於圖像。所以我相信我已經回答了這個問題。有了CSS或html的基本知識，人們應該知道，如果您希望標題位於圖片上方，只需將包含的div移動到頂部即可解決問題。那麼人們可以再次爭論，但你看到這就是我給出選擇的原因。 – itsols 2013-04-26 03:46:19

文字放在圖像是否存在與否

回答

相關問題