如何使用HTML在矩形形状内放置文本与图片并设置页面右对齐？

你可以通过HTML搭配基础CSS实现需求，以下是可直接运行的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片嵌入黑框示例</title>
    <style>
        /* 右侧容器整体样式 */
        .right-image-block {
            width: 300px; /* 可根据需求调整容器宽度 */
            float: right; /* 实现整体右对齐 */
            background-color: #000; /* 纯黑色背景 */
            padding: 20px 0; /* 上下预留20px空间放文本，可自行调整数值 */
            box-sizing: border-box;
        }
        /* 容器内图片样式 */
        .right-image-block img {
            width: 100%;
            display: block;
            object-fit: cover;
        }
        /* 容器内文本样式 */
        .block-text {
            color: #fff;
            text-align: center;
            padding: 0 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <!-- 其他页面内容可以写在这里 -->
    <div class="right-image-block">
        <p class="block-text">上方预留文本位置</p>
        <!-- 替换下面img标签的src属性为你要使用的网络图片地址 -->
        <img src="替换为你的网络图片地址" alt="展示图片">
        <p class="block-text">下方预留文本位置</p>
    </div>
    <!-- 其他页面内容可以写在这里 -->
    <div style="clear: both;"></div>
</body>
</html>

关键属性说明 #

• float: right：实现整个黑色矩形块对齐到页面右侧，周围文字会自动环绕在块的左侧
• padding: 20px 0：控制矩形上下预留的文本空间，数值越大预留空间越多，可根据需求自行修改
• background-color: #000：设置矩形背景为纯黑色，可自行调整颜色值
• 不需要文字环绕效果时，将float: right替换为margin-left: auto即可实现块右对齐且无环绕效果

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