html - 为什么在图像和某些文本之间添加边距或填充时我不能满意？

Question

我想要左边的图片和右边的三段文字。我明白了，但试图在它们之间增加一些空间被证明是徒劳的。我试过将 padding-left 和 margin 添加到 css，但他们忽略了它们，就像啦啦队长对待 Nerd 一样。

jsfiddle 在这里:http://jsfiddle.net/GwYJH/

这是我的 HTML:

<a id="mainImage" class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/1456334050" rel="nofollow noreferrer"><img height="200" width="160" src="http://ecx.images-amazon.com/images/I/51ETjedyMAL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU01_.jpg"></img></a>

<div class="category">Picaresque Satire</div>
</br>
<div class="title">the Zany Time Travels of Warble McGorkle</div>
</br>
<div class="author">Blackbird Crow Raven</div>
</br>

...和 ​​CSS:

body {
    background-color: black;
}
.floatLeft {
    float: left;
}
.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    padding-left: 25;
    margin: 25;
}
.title {
    display: inline-block;
    font-family: Calibri, Candara, serif;
    color: Yellow;      
}
.author {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
}

如果 View 框变窄，我还希望每段文本都换行。 IOW，“流浪汉讽刺”应该变成:

Picaresque
Satire

...如果一行中没有足够的空间；如果空间不足，它现在正在做的是移动到图像下方(如果它被压得更厉害，它就会像我想要的那样破裂)。

Answer 1

    #mainImage {
        margin-right:15px;
    }

   .category p {
   word-wrap:break-word;
    }

此处演示:http://jsfiddle.net/GwYJH/8/

单词换行的方式(即换行到图像的右侧或下方)完全取决于包含元素的宽度。