css-具有缩略图的材料列表

 

 

<ul class="list list--material">
  <li class="list-item list-item--material">
    <div class="list-item__left list-item--material__left">
      <img class="list-item__thumbnail list-item--material__thumbnail" src="http://placekitten.com/g/42/41" alt="Cute kitten">
    </div>

    <div class="list-item__center list-item--material__center">
      <div class="list-item__title list-item--material__title">Lily</div>
      <div class="list-item__subtitle list-item--material__subtitle">Very friendly cat</div>
    </div>
  </li>

  <li class="list-item list-item--material">
    <div class="list-item__left list-item--material__left">
      <img class="list-item__thumbnail list-item--material__thumbnail" src="http://placekitten.com/g/40/40" alt="Cute kitten">
    </div>

    <div class="list-item__center list-item--material__center">
      <div class="list-item__title list-item--material__title">Molly</div>
      <div class="list-item__subtitle list-item--material__subtitle">Loves tuna!</div>
    </div>
  </li>

</ul>