两列布局中图像旁边的文本

Question

我正在尝试创建左侧带有圆形图像的联系人块，右侧是联系人详细信息。像这样的：

联系块：

一栏布局可以正常工作，但是当我尝试创建两栏时，文本会移动到图片下方。

这是我的代码：

<div class="row">
  <div class="column">
    <div Id="wrapper">
      <section>
        <ul>
          <li>
            <img src="https://cdn0.iconfinder.com/data/icons/mobile-device/512/man-body-person-blue-round-512.png" alt="" width=200px id="pic">
            <div class="details">
              <p id="p1">John Doe</p>
              <p id="p2"><a href="www.google.pl">More information</a></p>
            </div>
          </li>
        </ul>
      </section>
    </div>
  </div>

  <div class="column">
    <div Id="wrapper">
      <section>
        <ul>
          <li>
            <img src="https://cdn0.iconfinder.com/data/icons/mobile-device/512/man-body-person-blue-round-512.png" alt="" width=200px id="pic">
            <div class="details">
              <p id="p1">John Doe</p>
              <p id="p2"><a href="www.google.pl">More information</a></p>
            </div>
          </li>
        </ul>
      </section>
    </div>
  </div>

</div>

<style>
  #wrapper ul {
    padding: 0;
    margin: auto;
    width: 100%;
    list-style-type: none;
  }
  
  #wrapper ul li {
    padding: 30px;
    margin-bottom: 20px;
    display: table;
    width: 100%;
  }
  
  #wrapper ul li img {
    float: left;
  }
  
  #wrapper ul li .details {
    float: left;
    padding: 70px 0 0 20px;
    width: 75%;
  }
  
  #p1 {
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  #p2 {
    line-height: 0px;
  }
  
  .column {
    float: left;
    width: 50%;
  }
</style>

你能帮我解决它吗？当我链接到矩形照片时，您还可以告诉我如何创建圆形照片吗？

Answer 1

请看下面的小提琴：

https://jsfiddle.net/asutosh/opeg32hL/7/

 #wrapper ul {
   padding: 0;
   margin: auto;
   width: 100%;
   list-style-type: none;
 }

 #wrapper ul li {
   padding: 30px;
   margin-bottom: 20px;
   display: flex;
   width: 100%;
 }

 #wrapper ul li img {
   float: left;
 }

 #wrapper ul li .details {

   padding: 70px 0 0 20px;
   width: 75%;
   display: flex;
   flex-direction: column;
 }

 #p1 {
   font-weight: bold;
   margin-bottom: 5px;
 }


 .column {
   float: left;
   flex-basis: 50%;
   flex-shrink:1;
 }

<div class="row">
  <div class="column">
    <div Id="wrapper">
      <section>
        <ul>
          <li>
            <img src="https://cdn0.iconfinder.com/data/icons/mobile-device/512/man-body-person-blue-round-512.png" alt="" width=200px id="pic">
            <div class="details">
              <p id="p1">John Doe</p>
              <p id="p2"><a href="www.google.pl">More information</a></p>
            </div>
          </li>
        </ul>
      </section>
    </div>
  </div>

  <div class="column">
    <div Id="wrapper">
      <section>
        <ul>
          <li>
            <img src="https://cdn0.iconfinder.com/data/icons/mobile-device/512/man-body-person-blue-round-512.png" alt="" width=200px id="pic">
            <div class="details">
              <p id="p1">John Doe</p>
              <p id="p2"><a href="www.google.pl">More information</a></p>
            </div>
          </li>
        </ul>
      </section>
    </div>
  </div>

</div>