使用float:left实现响应式三栏布局多端适配问题

你的响应式布局失效是CSS语法错误+规则缺失+样式冲突共同导致的，和导航栏的max-width规则没有关系，具体问题点：

• 核心语法错误导致移动端媒体查询完全失效：
  • 600px宽度断点的媒体查询中，.column选择器后缺少左大括号{，整条适配规则被浏览器直接忽略，因此宽度变化时三栏始终保持33.33%宽度，只会同步收窄不会换行
  • h3样式中padding-left;10px把属性和值之间的冒号错写为分号，该样式失效
  • 导航栏CSS块开头存在一个孤立的左大括号{，会干扰后续CSS规则解析
  • 样式块中错误使用HTML注释标签<!-- -->，CSS仅识别/* 注释 */格式的注释，低版本Chrome下会触发解析异常
• 缺少平板端适配规则：你只写了600px以下切1栏的逻辑，没有配置中等宽度下的两栏规则，自然无法实现iPad端2栏的效果
• 样式冲突：给span标签单独写了float: left; width: 33.33%的规则，和栏目的浮动宽度规则叠加导致布局错乱；同时p标签上写了过时的行内width="33%"属性，进一步干扰宽度计算

1. 修正所有CSS语法错误，删除冲突的span浮动宽度规则、无效行内样式
2. 新增601px~992px宽度区间（主流iPad设备宽度范围）的媒体查询，设置栏目宽度为50%实现两栏布局
3. 统一合并重复的body样式规则，补全导航栏展开收起的基础逻辑

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* 全局基础样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            min-height: 100%;
            background-color: white;
            padding: 0 15%;
            color: black;
            font-family: Arial, Helvetica, sans-serif;
        }
        h3 {
            padding-left: 10px;
            padding-top: 10px;
        }
        h2 {
            text-align: center;
            margin: 20px 0;
        }
        p {
            text-align: left;
            padding: 10px;
        }

        /* 导航栏样式 */
        .topnav {
            overflow: hidden;
            background-color: black;
        }
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 14px;
        }
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }
        .topnav a.active {
            background-color: grey;
            color: white;
        }
        .topnav .icon {
            display: none;
        }

        /* 三栏布局基础规则 */
        .column {
            float: left;
            width: 33.33%;
            padding: 10px;
            min-height: 300px;
            background: #FF6347;
        }
        /* 清除浮动避免高度塌陷 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* iPad端 两栏适配 */
        @media screen and (max-width: 992px) and (min-width: 601px) {
            .column {
                width: 50%;
            }
        }

        /* 导航栏平板适配 */
        @media screen and (max-width: 800px) {
            .topnav a:not(:first-child) {display: none;}
            .topnav a.icon {
                float: right;
                display: block;
            }
        }

        /* 移动端 单栏适配 */
        @media screen and (max-width: 600px) {
            body {
                padding: 0 5%;
            }
            .column {
                width: 100%;
                float: none;
            }
            .topnav.responsive {position: relative;}
            .topnav.responsive .icon {
                position: absolute;
                right: 0;
                top: 0;
            }
            .topnav.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="topnav" id="myTopnav">
        <a href="#home" class="active">首页</a>
        <a href="#service">服务</a>
        <a href="#about">关于</a>
        <a href="javascript:void(0);" class="icon">菜单</a>
    </div>

    <!-- 内容区 -->
    <h2>响应式三栏布局</h2>
    <div class="row">
        <div class="column">
            <h3>Accounts payable</h3>
            <p>Processing supplier invoices and setting up payment batches.</p>
        </div>
        <div class="column">
            <h3>Accounts receivable</h3>
            <p>Managing customer payments and tracking outstanding invoices.</p>
        </div>
        <div class="column">
            <h3>Payroll management</h3>
            <p>Calculating employee salaries and processing monthly payroll runs.</p>
        </div>
    </div>

    <script>
        // 导航栏移动端展开/收起功能
        const nav = document.getElementById('myTopnav');
        document.querySelector('.topnav .icon').addEventListener('click', () => {
            nav.classList.toggle('responsive');
        })
    </script>
</body>
</html>

提示：如果需要调整断点阈值，直接修改媒体查询后面的max-width、min-width数值即可，比如想让两栏布局在宽度1000px时触发，就把992px改成1000px。

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