有人可以帮我对齐图像旁边的文字吗？

Question

我正在努力让文字放在图片旁边，它只是没有发生，请问有人可以解释我在这里做错了什么？非常感谢！

＆＃13;

＆＃13;

    
    
    .alignright {
    	float: right;
    }
    
    .source {
        overflow: hidden;
        width: auto;
        height: 100%;
    }
    
    .source img {
        width: 100%;
    }
    
    
    .margin25 {
        margin:25px;
    }

＆＃13;

    <!--LEFT CONTAINER DIV-->
     <div style="float:left;width:40%;margin-left:2%;">
       <div class="source" style="width:20%;">
       <img src="http://placehold.it/150x150">
       </div>
        <h1 class="alignright">Recommendations?</h1>
        <br />
       <h2 class="margin25">main text</h2>
     </div>
    <!--LEFT CONTAINER DIV--> 

＆＃13;

＆＃13;

＆＃13;

Answer 1

在所有3个标签（img，h1，h2）和h1和h2 span标签中尝试使用标签而不是div和display：initial将float属性设置为向右或向左。

Answer 2

刚刚纠正了所需内容：

（点击代码段中的完整页面，否则您将看不到与您自己的结果的差异）

＆＃13;

＆＃13;

.wrap {
  width: 40%;
  margin-left: 2%;
}

.alignright {
    display: inline;
    
}

.source {
    float: left;
    overflow: hidden;
    width: 20%;
    height: 100%;
}

.source img {
    width: 100%;
}


.margin25 {
    margin: 25px;
    display: inline;
}

＆＃13;

<div class="wrap">
   <div class="source">
   <img src="../image/recomendbutton.jpg">
   </div>
    <h1 class="alignright">Recommendations?</h1>
    <br />
   <h2 class="margin25">main text</h2>
 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

  .alignright {
      margin-top:-40px;
      width: 77%;
      float: right;
  }
  .source {
      overflow: hidden;
      width: auto;
      height: 100%;
  }
  .source img {
      width: 100%;
  }
  .margin25 {
      margin:25px;
  }

＆＃13;

<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
    <div class="source" style="width:20%;">
        <img src="http://placehold.it/150x150"><span>
           </div>
           <h1 class="alignright">Recommendations?</h1></span>

        <br />
         <h2 class="margin25">main text</h2>

    </div>
    <!--LEFT CONTAINER DIV-->

＆＃13;

＆＃13;

＆＃13;