想CSS列重疊

Question

我已經通過Stackoverflow搜索，發現很多人試圖避免重疊在CSS列，但我實際上被要求使文本和圖像重疊。

UPDATE：

更好的圖像解釋什麼，我一直在問的事，和我使用的代碼的鏈接。謝謝！

^{http://unfetteredletters.com/webdev/twocolumnlayout.jpg}

鏈接代碼： http://unfetteredletters.com/webdev/AF_columnLayout/AF_2columnLayout.html

這可能嗎？

Answer 1

你可以用負邊距來做這樣的事情。

看看這個：http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

#content {margin-right:-100px;} 

Answer 2

要回答你的問題，是有可能。

要回答你沒問的問題，你可以製作圖像背景圖像。

Answer 3

你需要設置你的圖像和div的css屬性顯示的包含塊是相對的。然後將要重疊顯示屬性的子項設置爲絕對。現在您可以使用適當的像素將它們定位在左上角或左下角。但你真的需要提供你的CSS風格，這樣很容易給出你可以使用的答案。

Answer 4

我唯一能想到的就是在圖像上使用負邊距。但是，只有將第一個圖像放在第二個容器中，並且如果您知道圖像的高度，它纔有效。因此，對於您的示例而言，這很好，但它不是適合所有可能性的解決方案。

HTML

<div> 
    [TEXT] 
</div> 

<div> 
    <img src="[URL]" alt="[ALT]"> 
    [TEXT] 
</div> 

CSS

的height，width和margin值只是示例值。

div { 
    float: left; 
    width: 300px; 
    margin: 0 20px 0 0; 
    vertical-align: top; 
} 

div:nth-child(1) { 
    padding: 250px 0 0 0; 
} 

img { 
    float: left;   
    width: 350px; 
    margin: 0 0 0 -320px; 
} 

演示

Try before buy