html中怎么实现两栏布局

htML中实现两栏布局的方法：1、利用float属性和margin属性来实现；2、利用Bfc技术来实现；3、利用table布局技术来实现；4、利用flex弹性布局技术来实现；5、利用grid网格布局技术来实现。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

html网页中实现两栏布局

1、利用float+margin实现

!DOCTYPE html>
    html>
    head>
    meta charset="UTF-8">
    tITle>
    Document/title>
    style>
.left1 {
    height: 300px;
    background-color: red;
    width: 400px;
    float: left;
}
.right1 {
    width: 400px;
    height: 300px;
    background-color: green;
    margin-left: 400px;
}
    /style>
    /head>
    body>
    div>
    /div>
    div>
    /div>
    /body>
    /html>
    

2、利用BFC实现

!DOCTYPE html>
    html>
    head>
    meta charset="UTF-8">
    title>
    Document/title>
    style>
.left2 {
    height: 300px;
    background-color: red;
    width: 400px;
    float: left;
}
.right2 {
    height: 300px;
    background-color: blue;
    overflow: hidden;
}
    /style>
    /head>
    body>
    div>
    /div>
    div>
    /div>
    /body>
    /html>
    

3、利用table布局

!DOCTYPE html>
    html>
    head>
    meta charset="UTF-8">
    title>
    Document/title>
    style>
.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left3 {
    display: table-cell;
    height: 300px;
    width: 300px;
    background-color: pink;
}
.right3 {
    display: table-cell;
    height: 300px;
    background-color: purple;
}
    /style>
    /head>
    body>
    div>
    div>
    /div>
    div>
    /div>
    /div>
    /body>
    /html>
    

4、利用flex布局

!DOCTYPE html>
    html>
    head>
    meta charset="UTF-8">
    title>
    Document/title>
    style>
.parentf {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
}
.left4 {
    height: 300px;
    width: 300px;
    background-color: skyblue;
}
.right4 {
    height: 300px;
    width: 100%;
    background-color: yellowgreen;
}
    /style>
    /head>
    body>
    div>
    div>
    /div>
    div>
    /div>
    /div>
    /body>
    /html>
    

5、利用grid布局

!DOCTYPE html>
    html>
    head>
    meta charset="UTF-8">
    title>
    Document/title>
    style>
.parent {
    height: 400px;
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
}
.left5 {
    background-color: skyblue;
}
.right5 {
    background-color: pink;
}
    /style>
    /head>
    body>
    div>
    div>
    /div>
    div>
    /div>
    /div>
    /body>
    /html>
    

推荐教程：html视频教程、css视频教程

以上就是html中怎么实现两栏布局的详细内容，更多请关注其它相关文章！

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