html布局上下两栏代码

在HTML网页布局中，经常会用到上下两栏来展示内容。下面提供一种利用HTML和CSS实现布局的方法。

div class="container">
    div class="left-column">
    p>
    左栏内容/p>
    /div>
    div class="right-column">
    p>
    右栏内容/p>
    /div>
    /div>

上述代码中，将整个布局包在容器div中，分成左右两栏。利用CSS对两栏进行样式设计：

.container {
    display: flex;
}
.left-column {
    flex: 1;
    background-color: lightgrey;
    padding: 20px;
}
.right-column {
    flex: 1;
    background-color: darkgrey;
    color: white;
    padding: 20px;
}
    

通过flex布局，在容器中使左右两栏自动适应屏幕宽度。同时，对左栏和右栏分别进行样式设置，包括背景颜色、文字颜色、内边距等。

以上代码可用于快速实现上下两栏布局，根据实际需要调整样式即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！