CSS布局技巧：实现图片与文字并排显示

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

.box {
    display: inline; /* 注意：此处通常不适用于块级容器 */
    text-align: center;
    float: left; /* 用于将多个box并排 */
    padding: 10px;
    width: 33.3%;
}

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

        <div class="box">
            <img class="blog-image" src="images/img2-service.jpg" width='255' height="175"/>
            <div class="text-content">
                <h3>9 STEPS TO STARTING A BUSINESS</h3>
                <p>This is a generic blog article you can use for adding blog content / subjects on your website.</p>
            </div>
        </div>
        <!-- 根据需要添加更多box元素 -->
    </div>
</section>

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    margin: auto;
    overflow: hidden; /* 用于清除子元素的浮动 */
    max-width: 1200px; /* 限制最大宽度，提升可读性 */
    padding: 20px;
}

#part2 h1 {
    text-align: center;
    font-size: 2.5em; /* 使用em单位，更具可伸缩性 */
    margin-bottom: 30px;
    color: #333;
}

.box {
    float: left; /* 使多个box并排显示 */
    width: 48%; /* 调整为两列布局，预留间距 */
    padding: 15px;
    margin-right: 2%; /* box之间的右侧间距 */
    box-sizing: border-box; /* 边框和内边距包含在宽度内 */
    margin-bottom: 20px; /* box之间的垂直间距 */
    background-color: #fcfcfc; /* 可选：用于区分box */
    border: 1px solid #eee;
    border-radius: 5px;
}

/* 最后一个box不需要右侧间距，或者用nth-child(even)清除 */
.box:nth-child(2n) {
    margin-right: 0;
}

.blog-image {
    float: left; /* 关键：使图片浮动到左侧 */
    margin-right: 15px; /* 图片与文字内容之间的间距 */
    max-width: 100px; /* 限制图片宽度，根据设计调整 */
    height: auto; /* 保持图片比例 */
    border-radius: 3px;
}

.text-content {
    /* 文本内容会自动环绕浮动的图片 */
    overflow: hidden; /* 辅助清除浮动，确保文本内容区域正确包裹 */
}

.text-content h3 {
    margin-top: 0; /* 移除标题默认上边距，使其更靠近图片顶部 */
    font-size: 1.2em;
    line-height: 1.4;
    color: #007bff;
}

.text-content p {
    font-size: 0.9em;
    line-height: 1.6;
    color: #555;
}

/* 响应式调整 (可选) */
@media (max-width: 768px) {
    .box {
        width: 100%; /* 小屏幕下改为单列 */
        margin-right: 0;
    }
    .blog-image {
        float: none; /* 小屏幕下图片不再浮动，恢复正常流 */
        display: block; /* 使图片成为块级元素，独占一行 */
        margin: 0 auto 15px auto; /* 居中显示，下方留白 */
        max-width: 150px; /* 调整图片大小 */
    }
    .text-content {
        text-align: center; /* 文字内容居中 */
    }
}