html bootstrap显示段落旁边的图像

Question

图像基本上就是我想要的。但是，我需要将文本段落与图像的顶部对齐。必须有一种简单的方法让它向上移动。我不知道它是什么？谢谢！

#homePost {
    width:50%;
    height:auto;
    box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
    margin-right: 25px;  
    margin-bottom: 20px; 
}

    <div class="well well-sm" style="border: 2px solid chartreuse; background: white;">
        <div class="row">
           <div class="col-sm-12">
               <p><h4>Toronto Maple Leafs Sucking again this year.</h4></p>
               <p>Date Posted: 24th of June, 2016</p>
               <p style="padding-top: 5px;"> </p>
           </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <p style="padding-left: 20px; padding-right: 20px;">
                    <img style="float:left" src="http://i.stack.imgur.com/E0kmH.png" id="homePost">
                    <span style="float:right"> 
                       <p>TEXT GOES IN HERE </p>
                    </span>
                </p>
            </div>
        </div>
    </div>

Answer 1

添加margin-top：20px;

像这样：

#homePost {
  width: 50%;
  height: auto;
  box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
  margin-right: 25px;
  margin-bottom: 20px;
  margin-top: 20px;
}

See This Image

Answer 2

在align-top等文字中添加一个类，然后使用vertical-align: text-top; .align-top { vertical-align: text-top; }