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

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>

你能帮我解决一下吗？你能告诉我如何在 link 到矩形照片时创建圆形照片吗？

Answer 1

请看下面fiddle:

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>

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

Text next to the image in two colums layout

html

css

text

multiple-columns