如何实现HTML中图片与段落并排显示？附代码示例

下面给你几个简单实用的方案，直接修改代码就能实现效果：

方法1：用Flexbox布局（推荐） #

这是目前最主流的布局方式，兼容性好且容易维护。只需给包裹图片和段落的容器添加Flex属性：

修改后的HTML：

<section class="contact-section" id="contact">
    <div class="container">
         <h1>All About Us</h1>
         <hr>
         <div class="content-row">
             <img src="hpbanner.webp" width="600" height="750">
             <p>text here</p>
         </div>
    </div>
</section>

对应的CSS：

.content-row {
    display: flex;
    gap: 20px; /* 控制图片和段落之间的间距 */
    align-items: flex-start; /* 垂直方向顶部对齐，可选center、flex-end */
}

/* 可选：让图片在小屏幕自动缩放，适配响应式 */
.content-row img {
    max-width: 100%;
    height: auto;
}

方法2：用Grid布局 #

如果需要更精细的列宽控制，Grid布局是不错的选择：

HTML结构和上面一致，CSS改成：

.content-row {
    display: grid;
    grid-template-columns: 600px 1fr; /* 图片占600px，段落占剩余空间 */
    gap: 20px;
    align-items: flex-start;
}

方法3：用浮动（传统方法） #

这是比较旧的实现方式，需要注意清除浮动避免布局混乱：

HTML无需额外嵌套，直接添加CSS：

.contact-section img {
    float: left;
    margin-right: 20px; /* 图片右侧间距 */
}

/* 清除浮动，避免容器高度塌陷 */
.container {
    overflow: auto;
}

如果担心浮动影响其他元素，也可以给容器加clearfix类：

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

然后给.container加上这个类即可。

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