如何在不使用CSS的情况下将两个card类元素并排显示？

问题根源 #

1. 标签未闭合/语法错误：原代码里多个标签（如第二个container、img、h、p）未正确闭合，还有img标签的style属性缺失前缀、h标签首尾不匹配，导致浏览器解析布局混乱。
2. 栅格布局使用错误：Bootstrap的col-*类必须嵌套在row容器内才能实现水平排列，原代码的列元素直接放在container里，无法触发横向布局。

修复后的完整代码 #

<div class="container m-3 p-3" style="background-color: black; max-width: 950px; border-radius: 5px;">
    <div class="container m-3 p-3" style="background: url('BG_IMG'); background-size: cover; background-color: #292929; max-width: 885px; border-radius: 5px;">
        <!-- 用row包裹需要并排的col元素 -->
        <div class="row">
            <div class="p-2 col-sm-4">
                <center><img src="IMG_LINK" style="max-width: 200px; border-radius: 5px;"></center>
                <div class="card p-2 my-3 text-center">
                    <h1 class="m-0"><b>NAME</b></h1>
                    <p><b>SUBTITLE</b></p>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="card">
                    <h4 class="m-3" style="height: auto; text-indent: 20px;"></h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <!-- 第二个Card所在的row，确保布局统一 -->
                <div class="row mt-3">
                    <div class="p-2 col-sm-4">
                        <div class="p-2 card">
                            <h3 class="m-1 text-center">INTERESTS</h3>
                            <hr class="w-75 my-1" style="background: light; height: 1px;">
                            <div class="mx-n1 text-center my-auto">
                                <p class="m-1">CONTENT</p>
                                <hr class="w-75 my-2" style="background: light; height: 1px;">
                                <p class="m-1">CONTENT</p>
                                <hr class="w-75 my-1" style="background: light; height: 1px;">
                                <p class="m-1">CONTENT</p>
                                <hr class="w-75 my-1" style="background: light; height: 1px;">
                                <p class="m-1">CONTENT</p>
                                <hr class="w-75 my-1" style="background: light; height: 1px;">
                                <p class="m-1">CONTENT</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

关键修复点 #

• 给需要水平排列的col-sm-4和col-sm-8添加外层row容器，触发Bootstrap栅格的水平布局逻辑
• 补全所有未闭合标签，修正img的style属性、h标签不匹配等语法错误
• 调整第二个Card的嵌套结构，确保布局逻辑和上方内容一致
• 保留原有样式和内容，仅修改布局结构部分

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