仅将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应用于文本内容

回答

相关问题