如何通过CSS实现图片右侧放置标题与文本的2列博客布局

你需要分别调整HTML结构和CSS样式，具体操作如下： #

1. 补全HTML结构 #

在现有2个.box节点后，追加剩余2组图文对应的.box代码，注意将图片src替换为你实际的文件路径，示例代码如下：

<section id="part2">
    <div class="container">
        <h1>Blog</h1>
        <div class="box">
            <img src="images/img1-service.jpg" width='255' height="175"/>
            <div class="box-text">
                <h3>10 RULES TO BUILD A WILDLY<br> SUCCESSFUL BUSINESS</h3>
                <p>You can edit all of this text and<br> replace it with anything you have<br> to say on your blog.</p>
            </div>
        </div>

        <div class="box">
            <img src="images/img2-service.jpg" width='255' height="175"/>
            <div class="box-text">
                <h3>9 STEPS TO STARTING A<br> BUSINESS</h3>
                <p>This is a generic blog article you<br> can use for adding blog content /<br> subjects on your website.</p>
            </div>
        </div>

        <!-- 新增的2组图文 -->
        <div class="box">
            <img src="images/img3-service.jpg" width='255' height="175"/>
            <div class="box-text">
                <h3>5 COMMON MISTAKES NEW<br> ENTREPRENEURS MAKE</h3>
                <p>Avoid these common pitfalls to keep<br> your business growing steadily in<br> the first three years.</p>
            </div>
        </div>

        <div class="box">
            <img src="images/img4-service.jpg" width='255' height="175"/>
            <div class="box-text">
                <h3>LOW COST MARKETING TIPS<br> FOR SMALL BUSINESS</h3>
                <p>Use these zero-cost or low-cost<br> methods to get your first batch of<br> loyal customers quickly.</p>
            </div>
        </div>
    </div>
</section>

注：给每组的标题和段落套了.box-text容器，方便单独控制文字区域的样式，你可以根据需要修改标题和段落的实际内容。

2. 修正CSS样式 #

原有CSS存在宽度设置错误、布局属性不匹配的问题，替换为以下代码即可实现要求的效果：

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif; /* 可替换为站点实际使用的字体 */
}

.container{
    max-width: 1200px; /* 限制板块最大宽度，避免超宽屏幕下内容过散 */
    margin: 0 auto;
    overflow: hidden;
    padding: 0 20px;
}

#part2 h1{
    text-align:center;
    font-size:250%;
    margin: 40px 0;
}

.box{
    /* 2列布局，每列占50%宽度 */
    width: 50%;
    float: left;
    padding: 15px;
    box-sizing: border-box; /* 内边距算在宽度内，不会撑破列布局 */
    /* 单组内左图右文排布 */
    display: flex;
    gap: 15px; /* 图片和文字的间距 */
    align-items: flex-start; /* 内容顶部对齐 */
}

.box img{
    flex-shrink: 0; /* 固定图片尺寸，不被文字区域压缩 */
}

.box-text h3{
    margin: 0 0 10px 0;
    font-size: 110%;
    line-height: 1.4;
}

.box-text p{
    margin: 0;
    line-height: 1.5;
    color: #666;
}

效果说明 #

• 整体为2列网格布局，每列自动排列2组图文，总共展示4组内容
• 每组内容固定为左侧图片、右侧标题+描述的排布，图文之间有合理间距
• 预留了响应式适配基础，需要移动端适配时可追加媒体查询，小屏幕下将.box宽度改为100%即可

内容的提问来源于stack exchange，提问作者Count of Monte Cristo