我如何能在現有內容的對齊div元素

我會跟一個小例子在這裏解釋：我如何能在現有內容的對齊div元素

我的HTML頁面的一些內容已經，沒有修改的內容我想插入一些消息（說插入一個圖像）通過離開頂部的div在已有內容的中間。

採取看看這張圖，這是在做一些CSS前工作：

http://i.stack.imgur.com/uhJbx.png

說明：圖片插入在與格內容的頂部的內容是在頂部

現在應用css之後，我想把一些地方放在內容之間，就像這樣：

http://i.stack.imgur.com/67YFf.png

描述：圖像插入的CSS中的內容的中間，但格對準是在頂部

HTML：

<div class="myimg"> 
    <img src=http://s14.postimg.org/miss2r3xt/html_css.jpg /> 
</div> 
<p>Some paragraph </p> 

<strong>What is HTML?</strong> 

<strong>What is CSS?</strong> 
<p>Some paragraph</p>

CSS：

.myimg { 
    position: absolute; 
}

下面是一個簡單示例的鏈接，我試圖修改jsfiddle。

讓我知道你們是否可以幫助!!!

來源

2013-07-31 Som

我不認爲這隻能用CSS來實現（或不嚴重的黑客攻擊盒模型......）。也許我錯了，但我認爲你必須移動你的''標籤，而不是 –

所以你想要移動div內的圖像，但不是div？爲什麼？ – Liam

實際上，在我的網站上，我已經擁有存儲在數據庫中的所有帖子的內容，現在我想在帖子的特定位置插入一條簡單的消息，而無需修改數據庫中的原始內容。 – Som

嘗試下面的CSS的圖像與出位置修改HTML內容：

.myimg { 
margin-top: 100px; 
} 
div.myimg + p { 
position: absolute; 
    top: 0px; 
    left: 0px; 


}

看一看的工作演示在這裏：Demo

來源

2013-07-31 10:21:32 web2008

這僅適用於文本高度爲100px的情況，請參閱：http://jsfiddle.net/ZjCfp/10/。 OP說這會改變。 – Liam

爲了增加與CSS的一些元素，看一看在:after和:before。

例如，您可以將此行添加到你的CSS

strong:before{ 
    content:url('http://s14.postimg.org/miss2r3xt/html_css.jpg'); 
}

來源

2013-07-31 10:26:46

請注意IE不支持內容太好http://caniuse.com/css-gencontent – Liam

如果您接受jQuery的解決方案，這將圖像中的內容第一段後放置：

$(document).ready(function(){ 
    var theImg = $('.myimg').remove(); 
    $('p').first().after(theImg); 
});

如果您在您的內容中有標記，然後使用該標記而不是$('p').first()。

你fidlle，這種方法更新：

http://jsfiddle.net/ZjCfp/9/

來源

2013-07-31 10:28:05

我如何能在現有內容的對齊div元素

回答

相關問題