html - 需要帮助以使图片站立在左侧每一列的旁边

我已经尝试了几个小时，以使第1张照片紧挨着一列（第二张照片也紧挨着第二列），但我无法使其正常工作。有人可以帮助我解决我的问题吗？做错了吗？

http://jsfiddle.net/xp419wgc/

.column2 {
    float: left;
    width: 25%;
    padding: 10px;
    height: 100px;
}

.row2:after {
    content: "";
    display: table;
    clear: both;
  }

  .persons {
    font-family: dosis;
    margin: 0 auto;
    width: 1000px;
    height: 200px;
    background: rgba(255, 200, 255, 0.8);
    color: rgb(0, 0, 0);
    font-size: 14px;
    }

<div class="persons"><br>
<div class="row2">
  <div class="column2">
    <h2>Jane Doe</h2><hr align="left" width="80%" noshade><p1>OFFICE</p1>
    <p>
<p>Mail: [email protected]
    <br>Phone: 123
</p>
    <br><br>

  </div>
    <img src="http://www.infoprobe.com.au/site/images/drblankfem.gif" height="10%" width="10%">
    <img src="http://www.infoprobe.com.au/site/images/drblankfem.gif" height="10%" width="10%">
  <div class="column2">
    <h2>Jane Doe</h2><hr align="left" width="80%" noshade><p1>OFFICE</p1>
    <p>
  <p>Mail: [email protected]
    <br>Phone: 123
</p>


</div></div>

最佳答案

我相信您的专栏是浮动的，但您的图片却不是。这意味着您的列将浮动在一起，并且之后将显示图像。

我建议您也将float：留给图像

关于html - 需要帮助以使图片站立在左侧每一列的旁边，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48194736/