图像和文本之间的差距

Question

我的问题是我的图片和文字之间存在很大差距。

我有这段代码：

<ol style="list-style-type: lower-roman;">
<li value="1"><b>View the label of the nodes</b></li>
</ol></br>
<br/><br/>
<figure><img src="images/tut/ft1.gif" alt="feature_1" style="float:left"></figure>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<ol style="list-style-type: lower-roman;">
<li value="2"><b>Highlight the nodes</b></li>
</ol></br>

结果会是这样的：

我必须放<br/>以允许下一个列表正确定位在图像下方。如果没有，那将是非常混乱的。

这是css：

    figure {
    display: block;
    }

    figure img {
    display: block;
    float: right;
    }

    figure figcaption {
    align: center;
    }

    b {
    font-weight:bold;
    }

    i {
    font-style:italic;
    }

    p {
    display: inline;
    line-height: 150%;
    }

人们建议放置display:block或删除标签之间的任何空格，但它仍无效。

Answer 1

请删除所有br标签。

然后，添加以下样式

figure {
    display: inline-block;
    clear: both;
}

Answer 2

差距是由<br />引起的。由于您将它们用于clear，我建议：

1）删除所有<br />

2）删除图片上的float（样式和CSS）

3）中心图像（我使用margin: 0 auto）

小提琴：http://jsfiddle.net/xn9bf5od/