僅將CSS應用於文本內容

我想僅將CSS應用於文本。我有這樣的代碼：僅將CSS應用於文本內容

<div id='post-body'> 
Lorem ipsum dolor set 
<img src='any URL'> 
</div>

而且this picture表明我是多麼希望它看起來像

應該有一個填充爲純文本和圖像應該有充分的寬度。

有沒有什麼辦法可以做到這一點使用javascript或jQuery？

來源

2015-11-01 Abhinav Singh

都有特定的CSS解決方案，是確定或它必須是腳本？ – LGSon

爲了獲得最佳答案，請爲您的問題添加儘可能多的相關信息，例如您使用Blogger發表了評論，也許如果有其他平臺感興趣，請添加。 – LGSon

這就是你如何做到的。

<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（它享有開放源代碼品牌），博客的未來將會非常黑暗。檢查了這一點

來源

2015-11-01 11:24:25

我正在使用博主，我需要這個所有職位 –

編輯答案。請立即檢查。 –

加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%; 
}

http://jsfiddle.net/thibaudsowa/Lrb8tmwt/

來源

2015-11-01 11:45:50

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和文本換行來突出它

來源

2015-11-01 12:15:36

只有文字上應該有填充。 – LGSon

@LGSon完成了，但我的回答是一種方式，而不是完成的工作:) –

僅將CSS應用於文本內容

回答

相關問題