Blogger中Flex模式下块内垂直对齐：双块布局内容定位方案

核心思路 #

借助CSS Flexbox特性，让右侧文本块内的内容自动分布到顶部和底部，同时保证左右两个块的高度完全一致。

具体实现步骤 #

1. 编写HTML结构
   打开Blogger文章编辑器并切换到HTML模式，按以下结构插入内容：

   <div class="flex-container">
     <div class="image-block">
       <img src="你的图片链接" alt="图片描述">
     </div>
     <div class="text-block">
       <p class="top-comment">这里是图片评论内容，会自动对齐到顶部</p>
       <p class="bottom-author">图片作者：XXX</p>
     </div>
   </div>
   

2. 添加自定义CSS样式
   进入Blogger后台的「主题」→「自定义」→「高级」→「添加CSS」，粘贴以下代码：

   .flex-container {
     display: flex;
     gap: 20px; /* 左右块的间距，可自行调整 */
     align-items: stretch; /* 强制左右块高度匹配 */
     margin-bottom: 30px; /* 和下方内容的间距 */
   }
   
   .image-block img {
     max-width: 100%;
     height: auto; /* 保持图片原有比例 */
     display: block;
   }
   
   .text-block {
     display: flex;
     flex-direction: column; /* 垂直排列内部文本 */
     justify-content: space-between; /* 顶部和底部内容自动拉开距离 */
     flex: 1; /* 让文本块自动填充剩余宽度，也可改为固定值如width:400px */
   }
   
   /* 可选优化：消除默认边距让对齐更精准 */
   .top-comment {
     margin-top: 0;
   }
   
   .bottom-author {
     margin-bottom: 0;
     font-size: 0.9em;
     color: #666;
   }
   

3. 效果说明

   • 父容器flex-container通过display:flex实现左右并排，align-items:stretch确保右侧文本块高度和左侧图片块完全一致；
   • 文本块text-block内部用垂直Flex布局+justify-content:space-between，自动把评论推到顶部、作者说明推到底部；
   • 若需要固定文本块宽度，把flex:1替换为具体的像素值即可。

内容的提问来源于stack exchange，提问作者lfone