如何实现section区块与img图片横向并排对齐显示？

云上老周

2026-10-3

问题根源

<section> 为原生块级元素，默认display: block属性，即使设置了宽度也会独占一行，后续元素默认会被挤压到下一行
仅给图片设置display: inline或浮动属性，未对<section>做对应布局配置，二者不在同一布局流内无法并排
浮动布局下未做浮动清除，可能会导致后续页面布局错乱

解决方案

方案1：适配现有浮动逻辑

仅需修改少量代码即可实现效果：

给section添加左浮动属性，和右侧右浮动的图片匹配布局流

section {
    margin-left: 2%;
    width: 30%;
    background-color: #5CDB95;
    text-align: center;
    float: left; /* 新增这一行 */
}

给section和图片外层套一个父容器，添加浮动清除样式，避免影响后续布局

<!-- 新增父容器 -->
<div class="content-wrapper">
    <section>
        <h2>Vem är benim</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea cupiditate eveniet libero numquam iste unde quisquam quam, tempore perferendis? Rerum assumenda delectus quisquam molestias. Cupiditate corporis non culpa illo repellat!</p>
    </section>
    <img class="selfie" width="30%" src="img/selfie.jpg" alt="自拍">
</div>

/* 新增清除浮动样式 */
.content-wrapper::after {
    content: "";
    display: block;
    clear: both;
}

方案2：更易用的Flex布局（推荐）

不需要处理浮动相关的兼容问题，布局更灵活可控：

保留上面新增的.content-wrapper父容器，修改对应CSS即可：

.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 若要垂直居中改为center即可 */
    padding: 0 2%;
}
section {
    /* 删掉原有margin-left和浮动属性 */
    width: 30%;
    background-color: #5CDB95;
    text-align: center;
}
.selfie {
    /* 删掉原有float: right属性 */
    width: 30%;
}