SOURCE

<div class="row width">
  <div class="col-md-3">
    <div class="module">
      <div class="module-img">
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTYxIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDU2MSAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTZiMGJiN2NlZGEgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToyOHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNmIwYmI3Y2VkYSI+PHJlY3Qgd2lkdGg9IjU2MSIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIyMDcuODQzNzUiIHk9IjExMi42Ij41NjF4MjAwPC90ZXh0PjwvZz48L2c+PC9zdmc+" alt="...">
      </div>
      <div class="module-works">
        <h4 class="module-works-name">Thumbnail label</h4>
        <p class="module-works-desc">CSS 是开放网络的核心语言之一，由 W3C 规范实现跨浏览器的标准化 ... ...</p>
      </div>
      <div class="module-authors">
        <a class="module-authors-item">
          <i class="module-authors-icon"></i>
          <p class="module-authors-name">作者君作者君作者君</p>
        </a>
        <p class="module-authors-item module-authors-labels">Author/COC</p>
      </div>
    </div>
  </div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
</div>

body{
  padding: 20px;
}
.width{
  width: 1120px;
  font-size: 0;
}
.col-md-3{
  display: inline-block;
  width: 25%;
  height: 300px;
  box-sizing: border-box;
  /* border: 1px solid red; */
  vertical-align: top;
}
.module{
  width: 240px;
  height: 300px;
  margin: 0;
  /* border: 1px solid #ddd; */
  font-size: 12px;
}
.module-img{
  width: 240px;
  height: 180px;
}
.module-img>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.module-works{
  padding: 0 15px;
  box-sizing: border-box;
}
.module-authors{
  position: relative;
  display: flex;
  padding: 0 15px;
  box-sizing: border-box;
  height: 36px; 
  line-height: 36px;
  border-top: 1px solid #ddd; 
}
.module-authors-icon{
  position: absolute;
  top: 3px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #ddd;
}
.module-authors-item{
  flex: 1;
}
.module-authors-name{
  width: 8em;
  text-indent: 36px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-authors-labels{
  text-align: right;
  color: #888;
}