如何在图像旁边对齐标题和段落

Question

我希望左边有一个图像，顶部有一个标题，标题下面有一个段落。

示例：Link

我现在的代码：

.code {
	margin-left: 10%;
	clear: left;
	margin-bottom: 100px;
}

.code h1 {
	font-size: 25px;
	font-family: 'Kurale', serif;
	font-weight: bold;
	vertical-align: top;
	margin-left: 20px;
	display:inline-block;
}

.code p {
	font-family: 'Spectral', serif;
	vertical-align: middle;
}

.code img {
	display: inline-block;
}

<div class="code">
<img src="code.jpg" style="width: 100px; height: 100px; border-radius:15%; overflow:hidden;">
<h1>Website Development:</h1>
<p>We do stuff</p>
</div>
<div class="code">
<img src="game.jpg" style="width: 100px; height: 100px; border-radius:15%; overflow:hidden;">
<h1>Game Development</h1>
</div>

Answer 1

不更改标记就是将float: left添加到您想要的图像中。

您的图片新代码将是：

.code {
  margin-left: 10%;
  clear: left;
  margin-bottom: 100px;
}

.code img {
  width: 100px;
  height: 100px;
  border-radius: 15%;
  overflow: hidden;
  float: left;
}

.code h1 {
  font-size: 25px;
  font-family: 'Kurale', serif;
  font-weight: bold;
  vertical-align: top;
  margin-left: 20px;
  display: inline-block;
}

.code p {
  font-family: 'Spectral', serif;
  vertical-align: middle;
}

<div class="code">
  <img src="code.jpg">
  <h1>Website Development:</h1>
  <p>We do stuff</p>
</div>
<div class="code">
  <img src="game.jpg">
  <h1>Game Development</h1>
</div>

Answer 2

这实际上取决于当您的左列或右列较长时您想要的行为，但看起来您正在尝试使用2列的表行为...

＆＃13;

＆＃13;

.container {
  display:table ;
}

.code {
  display:table-row ;
}

.code .left,
.code .right{
display:table-cell ;
vertical-align:top ;
}

.code .left { width:100px ; }

.left img { width:100px ; height:100px ; background:blue ; }

＆＃13;

<div class="container">
  <div class="code">
    <div class="left">
      <img src="code.jpg">
    </div>
    <div class="right">
      <h1>Website Development:</h1>
      <p>We do stuff</p>
    </div>
  </div>
  <div class="code">
    <div class="left">
      <img src="game.jpg">
    </div>
    <div class="right">
      <h1>Game Development</h1>
      <p>We do stuff</p>
      <p>We do stuff</p>
      <p>We do stuff</p>
      <p>We do stuff</p>
     </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;