能否在Django的{% block content %}外包裹div实现三栏布局避免堆叠？

• 完全可以在Django的{% block %}标签外部包裹<div>等HTML标签，这是利用模板继承实现公共布局的标准用法，你的实现思路本身没有问题。
• 你当前遇到的三栏垂直堆叠问题，是基础HTML结构错误导致的：你的column center对应的div标签没有正确闭合，浏览器会将右侧栏识别为中间栏的子元素，无法触发浮动布局规则，所以样式失效。

修复方案 #

补全column center的闭合标签即可，修复后的body部分模板代码如下：

<body>
    <div class = "row">
        <div class = "column left">
            {% block left %}
            {% endblock %}
        </div>
        <div class = "column center">
            {% block center %}
            {% endblock %}
        </div>
        <div class = "column right">
            {% block right %}
            {% endblock %}
        </div>
    </div>
</body>

额外优化建议 #

• 你的模板末尾闭合HTML标签写为<HTML>，建议统一为小写的</html>，符合HTML语法规范，避免部分浏览器解析异常。
• 你的CSS代码中使用了--text_color、--background_color、--padding等自定义CSS变量，需要确保你在CSS全局作用域（比如:root选择器下）已经定义了这些变量，否则对应的样式不会生效。

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