<h2>响应式用户列表</h2>

<p>重置浏览器查看效果</p>

​

<div class="container">

  <img src="https://static.runcodex.com/images/mix/img_avatar.png" alt="Avatar" style="width:90px">

  <p><span>RUNCODEX - 1</span>  PHP 程序员</p>

  <p>Web 开发人员。</p>

</div>

​

<div class="container">

  <img src="https://static.runcodex.com/images/mix/img_avatar.png" alt="Avatar" style="width:90px">

  <p><span >RUNCODEX - 2</span> Java 程序员</p>

  <p>Web 开发人员。</p>

</div>

.container {

  border: 2px solid #ccc;

  background-color: #eee;

  border-radius: 5px;

  padding: 16px;

  margin: 16px 0

}

​

.container::after {

  content: "";

  clear: both;

  display: table;

}

​

.container img {

  float: left;

  margin-right: 20px;

  border-radius: 50%;

}

​

.container span {

  font-size: 20px;

  margin-right: 15px;

}

​

@media (max-width: 500px) {

  .container {

      text-align: center;

  }

  .container img {

      margin: auto;

      float: none;

      display: block;

  }

}