Question

我想只将css应用于文本。我有这段代码：

state

而this picture显示了我希望它看起来像

应该只有文本填充，图像应该有全宽。

有没有办法用javascript或jquery做到这一点？

Answer 1

我不知道为什么你有这么多-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/

Answer 2

display:flex;可以提供帮助。

＆＃13;

#post-body {
  display:flex;
  flex-direction:column-reverse;
  padding:15px;
  }
img {
  margin:-15px -15px 15px;

＆＃13;

<div id='post-body'>
Lorem ipsum dolor set
<img src='http://dummyimage.com/100x100/E73B3B/E73B3B'>
</div>

＆＃13;

但显然，如果HTML结构无法触摸，则需要使用javascript重新排序html并将文本换行以突出显示

Answer 3

这是你如何做到的。

<div id="post-body"><!--remove padding tag from post-body-->
<div style="mytext">Lorem ipsum dolar set</div>
<img src="any url">
</div>

在头部或此代码上方，添加以下代码:(正如您所说，您正在使用博主）

 <style>
    .mytext
    {
       padding:12px;
    }
  </style>

将“mytext”样式应用于您想要填充的每个文本。

另一个简单的解决方案是不要使用博客。我最初使用它但是因为这些原因而停止了它。使用Blogger，您无法获得足够的自定义，而且您处于“Google”状态并且依赖于此。如果你想让你的博客与众不同，一个更好的选择就是使用WordPress，它是开源的，独立的，并且有更多的自定义。

虽然你很难从博客转到word press，但它将来会有所帮助。 Bloggers / blogspots最初被使用，但现在技术已经发生变化，我们有更好的选择。博客的未来将是黑暗的，因为每个人现在都转向Word Press（享有开源品牌）。看看这个

仅将CSS应用于文本内容

3 个答案: