如何让图片与两段文字在同一行右侧对齐？

方法一：Flex布局（推荐，现代浏览器兼容） #

Flex是实现这种布局最简洁的方式，只需要给文本和图片的父容器设置flex属性即可：

1. 修改HTML，把<section>和<img>包裹在一个容器里：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Temporal veraniego</title>
    <link rel="stylesheet" type="text/css" href="css/testing7style.css">
</head>
<body>
    <h1>Un importante temporal</h1>
    <!-- 添加容器包裹文本和图片 -->
    <div class="content-container">
        <section>
            <p>Hoy hubo un temporal importante en la Ciudad de Buenos Aires y provincia. En lo personal estoy sin internet, por suerte con luz. Espero a pesar de la lluvia ver a mi amigo hoy, que me visita; vamos a compartir un café. No sé bien a dónde iremos, pues la inflación está haciendo estragos en el país, las pensiones, las jubilaciones, los salarios no crecen como deberían.</p>
            <p>En Buenos Aires la historia del verano es casi siempre la misma. Mucha humedad, mucho calor; luego una gran tormmenta. Parece las crisis cíclicas del capitalismo. Es triste, porque muchos sufren estas crisis y otros están preparados para sacar una buena tajada. En este momemento estoy leyendo "La Era del Capital, 1848-1875" de Eric Hobsbawm, justamente narra un poco esta cuestión. Puedo decir que es un libro muy recomendable, se lee fácil. Considero que Eric era un gran hombre, además de un gran historiador. Él se oponía a una sociedad meritocrática. Es una pena, realmente que ya no lo tengamos entre nosotros.</p>
        </section>
        <img src="imgs/smartOwl.jpg" alt="Búho inteligente">
    </div>
</body>
</html>

2. 修改CSS，给容器设置flex布局，同时调整文本和图片的宽度与对齐方式：

h1{
    text-align: center;
}
body{
    background-color: #fff; /* 可替换为你需要的背景色 */
}
/* 容器设置flex，让子元素同行排列 */
.content-container {
    display: flex;
    gap: 20px; /* 文本和图片之间留间距 */
    align-items: flex-start; /* 让文本和图片顶部对齐 */
    padding: 0 20px; /* 可选，避免内容贴紧页面边缘 */
}
section {
    flex: 1; /* 让文本区域自动占满剩余空间 */
}
img{
    width: 25%;
    height: auto; /* 保持图片比例，避免变形 */
}

方法二：Float浮动布局（兼容旧浏览器） #

如果需要兼容较老的浏览器，可以用float属性实现：

直接修改CSS即可，无需调整HTML结构：

h1{
    text-align: center;
}
body{
    background-color: #fff;
}
img{
    width: 25%;
    height: auto;
    float: right; /* 让图片向右浮动 */
    margin-left: 20px; /* 图片和文本之间留间距 */
    margin-bottom: 10px; /* 避免图片和下方元素贴紧 */
}
section {
    overflow: hidden; /* 让文本区域包裹浮动元素，避免内容错位 */
}

为什么之前的inline-block没用？ #

因为<section>是块级元素，默认会占满整个父容器的宽度，哪怕图片设置了inline-block，也会被挤到下一行。必须通过Flex、Float或者修改section的display属性（比如改成inline-block，但需要手动设置宽度，不如Flex方便）来打破这种默认布局。

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