Next.js实现1/3、2/3占比双竖向分栏布局失效问题求助

你的代码无法实现预期双栏布局，是几个语法和CSS逻辑问题叠加导致的：

• JSX语法错误：React/JSX中元素类名属性不能写HTML原生的class，必须写className，你写的<section class="indent-1">无法被框架识别，绑定的样式完全不生效；另外JSX中不能直接用//写注释，这类写法会被解析为普通文本，破坏DOM结构，正确注释写法是{/* 注释内容 */}。
• CSS逻辑冲突：你给.container和main标签都设置了display: flex+align-items: center，flex布局下子项默认会按内容收缩宽度，你写的float浮动布局规则完全被父级flex属性覆盖，根本不会触发。
• 布局参数错误：你给两个子section都设置了30%宽度，加总仅60%，完全不符合1/3+2/3的宽度要求；同时浮动元素的父级没有设置100%宽度，没有足够的横向空间承载两栏布局。
• 样式生效问题：Next.js中直接写普通<style>标签默认不会做全局样式注入，你写在标签内的浮动规则无法正确作用到目标元素上。

推荐直接用Flex实现双栏布局，比老旧的float方案更稳定，不需要处理浮动塌陷问题，维护成本更低。
首先修改全局CSS文件：

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

* {
  box-sizing: border-box;
}

main {
  padding: 2rem 0;
  flex: 1;
  width: 100%;
}

code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-family: Menlo, Monaco, Lucida Console, Courier New, monospace;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.two-col-container {
  width: 100%;
  display: flex;
  gap: 1.5rem;
  padding: 0 1rem;
}
.left-panel {
  width: 33.333%;
}
.right-panel {
  width: 66.666%;
}

然后修改页面对应的jsx文件：

import Head from 'next/head'
import Header from '@components/Header'
import Footer from '@components/Footer'

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Ayy Lmao</title>
        <link rel="icon" href="/MyLOGO.ico" />
      </Head>

      <main>
        <Header title="Under construction!" />
    
        {/* 原注释写法错误，JSX注释需要放在大括号包裹的块内
        <p className="description">
          For all business inquiries, please call 911
        </p>
        */}

        <div className="two-col-container">
          {/* 左侧1/3宽度面板 */}
          <section className="left-panel">
            <div>Some content 1</div>
            <div>Some more 1</div>
          </section>

          {/* 右侧2/3宽度面板 */}
          <section className="right-panel">
            <div>Some content 2</div>
            <div>Some more 2</div>
          </section>
        </div>
      </main>
    
      <Footer />
    </div>
  )
}

如果一定要用float实现布局，除了修正上述JSX语法错误外，还需要把父级flex容器的align-items属性改为flex-start，给浮动父级设置100%宽度，两个子面板宽度分别设为33.333%和66.666%，最后给父级加清除浮动的规则避免高度塌陷，整体维护成本远高于flex方案，不推荐使用。

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