如何将文本移至图片旁的顶部位置？

• 需求：将带有红色背景的文本（.provekk类）放在图片右侧的对应位置（参考预期效果）
• 问题：尝试用float方法实现时，文本跑到了图片底部，无法达到预期布局，需要修复，也可使用其他布局方案。

CSS #

.lastpart{
  background-color: #f7f7f7;
}
.lastpart {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  background-color: rgb(236, 236, 236);
  padding: 10px;
}
.grid-item-cer {
  background-color: rgba(255, 255, 255, 0.886);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;

}

.certify{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: lighter;
  font-size: 20px;
  
  padding-bottom: 40px;
}
.spec{
  border-right: 1px solid #d6c08d;
}
.s{
  display: inline-block;
  border: 1.5px solid black;
}
.giaikk{
  font-weight: bold;
  color: black;
  font-size: 15px;
  font-family:'Courier New', Courier, monospace;
  float: right;
  
}
.provekk{
  font-weight: bold;
  color: black;
  font-size: 15px;
  font-family:'Courier New', Courier, monospace;
  background-color: red;
  float: left;

}

HTML #

<div class="lastpart">
  
  <div class="grid-item-cer spec">
    <h3 class="certify">Chứng Chỉ - Giải Thưởng</h3>
    <img src="s.jpg" class="s" width="150px" height="200px">
    <h5 class="giaikk">ĐẠT GIẢI KHUYẾN KHÍCH KHỐI 7 TOÀN QUỐC - IOE</h5>
    <p class="provekk">-Chứng chỉ được cấp bỏi Internet Olympiads of English</p>
  </div>
</div>

方案1：使用Flex布局（推荐） #

Flex布局比float更易维护，能轻松实现预期的排列效果：

修改CSS：

.grid-item-cer {
  background-color: rgba(255, 255, 255, 0.886);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  /* 改为flex垂直排列 */
  display: flex;
  flex-direction: column;
}

/* 新增图片与文本的容器，实现横向排列 */
.img-text-wrapper {
  display: flex;
  gap: 20px; /* 图片和文本的间距 */
}

.giaikk{
  font-weight: bold;
  color: black;
  font-size: 15px;
  font-family:'Courier New', Courier, monospace;
  float: none; /* 移除原float */
  margin: 0 0 10px 0;
}
.provekk{
  font-weight: bold;
  color: black;
  font-size: 15px;
  font-family:'Courier New', Courier, monospace;
  background-color: red;
  float: none; /* 移除原float */
  margin: 0;
}

.s{
  border: 1.5px solid black;
  display: block; /* 移除inline-block */
}

调整HTML结构，将图片和文本放入统一容器：

<div class="lastpart">
  
  <div class="grid-item-cer spec">
    <h3 class="certify">Chứng Chỉ - Giải Thưởng</h3>
    <div class="img-text-wrapper">
      <img src="s.jpg" class="s" width="150px" height="200px">
      <div class="text-content">
        <h5 class="giaikk">ĐẠT GIẢI KHUYẾN KHÍCH KHỐI 7 TOÀN QUỐC - IOE</h5>
        <p class="provekk">-Chứng chỉ được cấp bỏi Internet Olympiads of English</p>
      </div>
    </div>
  </div>
</div>

方案2：修复Float布局 #

如果一定要用float，调整元素的浮动规则并清除浮动影响：

修改CSS：

.s{
  display: block;
  border: 1.5px solid black;
  float: left; /* 图片左浮动 */
  margin-right: 20px; /* 与文本保持间距 */
}

.giaikk{
  font-weight: bold;
  color: black;
  font-size: 15px;
  font-family:'Courier New', Courier, monospace;
  float: none; /* 移除右浮动 */
  margin: 0 0 10px 0;
}
.provekk{
  font-weight: bold;
  color: black;
  font-size: 15px;
  font-family:'Courier New', Courier, monospace;
  background-color: red;
  float: none; /* 移除左浮动 */
  margin: 0;
}

/* 清除父元素内的浮动，避免高度塌陷 */
.grid-item-cer::after {
  content: "";
  display: table;
  clear: both;
}

HTML结构保持不变即可，此时文本会自动排列在图片右侧，且两个文本块依次显示。

内容的提问来源于stack exchange，提问作者Duong Duc Dung FX22797