文字落在图像下方

Question

我需要这个文字来包装，但我不明白为什么不是。如果它变长，它就会低于图像。

<style>
.discussion {
width: 50%;
min-height: 100px;
margin: 0 auto;
}
.discussion img {
margin: 12.5px;
float: left;
}
.discussion a {
text-decoration: none;
margin-top: 12.5px;
display:inline-block;
}
#discussion_title {
font-size: 22px;
color: #3f3f3f;
margin-top: 5px;
}
</style>
<div class="discussion">
<img src="http://images.elephantjournal.com/wp-content/uploads/2013/01/mirror_cat-500x500.jpg" width="75" height="75" />
<div class="discussion_text">
    <a href="view-topic.php?tid=" id="discussion_title"> blah blah blah</a>
</div>
</div>

JSFiddle

Answer 1

试试这个：

.discussion img {
    margin: 12.5px;
    float: left;
    display:inline;
    width:10%; /* Whatever it should be*/
}
.discussion a {
    text-decoration: none;
    margin-top: 12.5px;
    float: right;
    display:inline-block;
}

Answer 2

你可以像this

那样做

删除display: inline-block的{​​{1}}并添加

.discussion a

Answer 3

您必须在float:left上加discussion_text并使其具有固定的宽度。

Answer 4

由.discussion a { display: inline-block; }引起，因此您可以将其删除或将其更改为.discussion a { display: block; }，以便文章在文章样式中流畅地呈现。

http://jsfiddle.net/9aMxg/2/

或者你可以为discussion_text添加以下内容而不是换行，但它会保留在一列中，而不是围绕图像流动：

.discussion_text {
    overflow: auto;
}

http://jsfiddle.net/MfadJ/

Answer 5

不要将inline用于a，这样，由于inline元素无法样式化，您将无法再对其进行自定义容易且非常有限！

inline-block会使a仅等于内容的宽度。

修改这部分，一切都很好

.discussion a {
        text-decoration: none;
        margin-top: 12.5px;
        display:block; //changed from inline-block
    }

demo

此外，您已经使用了多余的CSS来实现目标，可以将其缩小！