我想僅將CSS應用於文本。我有這樣的代碼:僅將CSS應用於文本內容
<div id='post-body'>
Lorem ipsum dolor set
<img src='any URL'>
</div>
而且this picture表明我是多麼希望它看起來像
應該有一個填充爲純文本和圖像應該有充分的寬度。
有沒有什麼辦法可以做到這一點使用javascript或jQuery?
我想僅將CSS應用於文本。我有這樣的代碼:僅將CSS應用於文本內容
<div id='post-body'>
Lorem ipsum dolor set
<img src='any URL'>
</div>
而且this picture表明我是多麼希望它看起來像
應該有一個填充爲純文本和圖像應該有充分的寬度。
有沒有什麼辦法可以做到這一點使用javascript或jQuery?
這就是你如何做到的。
<div id="post-body"><!--remove padding tag from post-body-->
<div style="mytext">Lorem ipsum dolar set</div>
<img src="any url">
</div>
在頭部或略高於這個代碼,添加以下代碼:(如你所說,你要使用Blogger)
<style>
.mytext
{
padding:12px;
}
</style>
應用「mytext的」風格你想有每個文本填充。
另一種簡單的解決方案是不要使用博客。我最初使用它,但由於這些原因而停止使用它。使用Blogger,您無法獲得足夠的自定義設置,並且您處於「Google」之下並依賴於此。如果你想讓你的博客獨一無二,更好的選擇是使用WordPress,它是開源的,獨立的,並且有更多的定製。
儘管你很難從博客轉移到單詞出版社,但它將在未來有所幫助。最初使用博客/博客區,但現在技術已經移動,我們有更好的選擇。隨着每個人都轉向Word Press(它享有開放源代碼品牌),博客的未來將會非常黑暗。檢查了這一點
我正在使用博主,我需要這個所有職位 –
編輯答案。請立即檢查。 –
加1爲您的問題。不知道爲什麼這麼多downvotes ...這不是一個愚蠢的問題,我認爲。你必須是初學者......必須是一些巨魔。 –
我不知道你爲什麼有這麼多的-1 ...
簡單的問題,答案很簡單:
如果您不能修改您HTML中你可以使用這個簡單的黑客:
#post-body {
position: relative;
width: 200px;
border: 1px solid red;
padding: 20px;
/*Depending of your image height: */
padding-top: 150px;
}
#post-body img{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
display:flex;
可能會有幫助。
#post-body {
display:flex;
flex-direction:column-reverse;
padding:15px;
}
img {
margin:-15px -15px 15px;
<div id='post-body'>
Lorem ipsum dolor set
<img src='http://dummyimage.com/100x100/E73B3B/E73B3B'>
</div>
但很明顯,如果HTML結構不能觸摸,javascript中,將需要重新秩序html和文本換行來突出它
只有文字上應該有填充。 – LGSon
@LGSon完成了,但我的回答是一種方式,而不是完成的工作:) –
都有特定的CSS解決方案,是確定或它必須是腳本? – LGSon
爲了獲得最佳答案,請爲您的問題添加儘可能多的相關信息,例如您使用Blogger發表了評論,也許如果有其他平臺感興趣,請添加。 – LGSon