float and width

float and width

by rough cheap

HTML

<div class="post">
  <div class="imgpart">
    <div class="image">
      <a href="#"><img src="http://192.168.10.147/wordpress/wp-content/uploads/2019/08/contact-150x150.jpg"></a>
    </div>
  </div>
  <div class="descpart">
    <p class="title">
      <a href="#">WP Githuber MD プラグイン</a>
    </p>
    <p class="excerpt">
      もしもアフィリエイトを利用されている方はご存知だと思いますが、リンクをアフィアフィリンクリンク
    </p>
    
  </div>
</div>

CSS

.post {
  border: 1px solid #dedede;
  border-radius: 4px;
	box-sizing: border-box;
  width: 100%;
	margin: 1em 0;
	padding: 1em;
}
.post::before, .post::after {
  content: "";
  clear: both;
  display: block;
}

.imgpart {
  float: left;
  box-sizing: border-box;
}

.imgpart img {
  width: 8em;
  height: 8em;
}

.descpart {
  width: calc(100% - 8em);
  float: left;
  box-sizing: border-box;
  padding-left: 1em;
}

.title a {
  font-size: 140%;
  font-weight: 800;
}

.excerpt {
  font-size: 140%;
}