双飞翼布局

最新推荐文章于 2024-10-29 14:54:04 发布

HcwDavid12

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量106

点赞数

文章标签： html

本文链接：https://blog.csdn.net/hcwdavid12/article/details/108819688

版权

<!DOCTYPE HTML>
<HTML>
<head>
<style>
/* 三栏布局——双飞翼 */
.box2 {
    border: 1px solid red;
    height: 100px;
}
.box2 .center-box {
    width: 100%;
    float: left;
}
.box2 .center {
    height: 100px;
    background-color: rgb(5, 172, 75);
    margin: 0 80px;
}
.box2 .left {
    width: 80px;
    height: 100px;
    background-color: rgb(13, 119, 212);
    float: left;
    margin-left: -100%;
}
.box2 .right {
    width: 80px;
    height: 100px;
    background-color: rgb(209, 122, 9);
    float: left;
    margin-left: -80px;
}
</style>
</head>
<body>

<h1>三栏布局</h1>
<h3>左中右布局，左右两边定宽，中间自适应:</h3>
<div class="box2">
    <div class="center-box">
    <div class="center">双飞翼布局中间弹性区域</div>
    </div>
    <div class="left">左固定</div>
    <div class="right">右固定</div>
    </div>

</ body>
</HTML>