如何在HTML中正确包装文本?

时间:2013-12-06 23:13:29

标签: html text

目前,我正试图想出一种将图像插入我的博客的简洁方法。由于某种原因,编辑器不支持文本换行,因此我尝试使用HTML进行文本换行。

在实际的博文中看起来很好:http://www.jerielng.com/apps/blog/show/39057864-book-review-a-dance-with-dragons

但是在另一个页面上,它看起来像这样,它重叠在其他文本上: http://www.jerielng.com/apps/blog/

以下是我目前的代码:

<p style="text-align: left; "><font color="#333333"><span><img src="http://www.jerielng.com/A_Dance_With_Dragons_US.jpg" class="fw_image_freewebs fwSizeProp" style="margin: 5px" width="167" align="left" border="0" height="248"/>Coming off from a disappointing fourth installment, </span><i>A Dance with Dragons</i><span> had much room for improvement, and George R. R. Martin certainly provided for a better story this time. I guess it&#8217;s inevitable that this book would be better since the series&#8217; three most beloved characters (Jon Snow, Daenerys Targaryen, and Tyrion Lannister) return after being left out last time. But, besides that, we get to see the stories develop more progress, building up to something much bigger. If you&#8217;ve read the other books in the series, or if you&#8217;re a fantasy reader at all, </span><i>A Dance with Dragons</i><span> is certainly worth the read despite the time it takes to finish it.</span></font></p><p><font color="#333333">&#160;</font></p><p><font color="#333333">Of course, I won&#8217;t say this novel is perfect. As much as it has improved from <i>A Feast for Crows</i>, this one still has some of that same stagnant feeling in which the characters don&#8217;t seem to be going anywhere specific. Then again, a good bit of the cast has (spoiler alert) already been killed off by this point, so the rest just seem to be meandering around. Overall, it seems to be holding off until the sixth and seventh books, where the major events will finally conclude the story. However, that&#8217;s not to say absolutely nothing happens. As I mentioned above, the story development this time is much stronger than in the past.</font></p><p><font color="#333333">&#160;</font></p><p><font color="#333333">What is also interesting about this book is that, towards the end, it begins to include all the characters again. In the fourth book and at least the first half of this one, Martin had separated the storylines by geography, not by chronology as he normally does, so the cast did feel a little thin for a while. Consequently, we are treated to that same experience that we had gotten used to, and hopefully this will continue on throughout the rest of the series.</font></p><p><font color="#333333">&#160;</font></p><p><font color="#333333">Putting aside the noticeable features of this particular novel, we still find the same elements of the story in <i>A Song of Ice and Fire</i> that we&#8212;or, at least, I&#8212;enjoy most about George R. R. Martin&#8217;s work. As usual, the prose flows beautifully with the imagery as detailed as ever, and the action and cliffhangers remain just as suspenseful. Yes, I&#8217;d like to see how the series concludes over the last few books, but as a standalone work, <i>A Dance with Dragons</i> did not disappoint.</font></p>

这可能是本段的CSS。我不知道在哪里可以找到确切的一个,因为该程序由于某种原因没有提供它。

#fw-mainColumn {border:6px grey !important; background: white !important; padding: 11px !important;}
#fw-mainColumn .fw-paragraph {background: Gainsboro  !important; color: black !important; border: 1px dotted black !important;}

1 个答案:

答案 0 :(得分:0)

这样的事情应该有效。 每个带有“post”类的div都是一篇新的博文(a.k.a. row)

HTML:

<div class="post">
    <div class="image">
        <img src="" />
    </div>
    <div class="message">
    </div>
</div>

CSS:

div.post{
    border: 1px solid #000000;
    overflow: auto;
    width: 100%
}

div.image {
    width: 40%;
    float: left;
}

div.message {
    width: 60%;
    float: right;
}

帖子类至少需要一个宽度。在某些浏览器上甚至还有一个高度 溢出使div在图像和消息周围对齐。

使post类对齐图像和消息的另一种/旧方法是在post类的CSS中使用它(而不是溢出):

clear: both;

这可确保post类忽略所有先前设置的浮点值。

编辑:

BTW:清理你的HTML 在这一刻,它很难读,因为它只是在一条线上。但我确实注意到了一些事情:

  • 所有跨度的是什么?
    如果要格式化某段文本,则只需要一个跨度 只需将文字放在<p>
  • <i>应替换为<em>
    我不会详细介绍这个,但它与Style Validity有关
  • 尽量将CSS放在外部文件中,然后将其加载到页面标题中 太多的内联CSS将变得不可读+如果你想改变1件事,还需要做很多额外的工作。