圣杯布局

最新推荐文章于 2024-10-08 17:26:50 发布

HcwDavid12

最新推荐文章于 2024-10-08 17:26:50 发布

阅读量88

点赞数

文章标签： html

本文链接：https://blog.csdn.net/HcwDavid12/article/details/108819493

版权

<!DOCTYPE HTML>
<HTML>
<head>
<style>
.box1 {
    border: 1px solid red;
    height: 100px;
    padding: 0 80px;
}
.box1 .left {
    width: 80px;
    height: 100px;
    background-color: rgb(17, 129, 228);

    float: left;
    margin-left: -100%;
    position: relative;
    left: -80px;
}
.box1 .right {
    width: 80px;
    height: 100px;
    background-color: rgb(219, 132, 17);

    float: left;
    margin-left: -80px;
    position: relative;
    right: -80px;
}
.box1 .center {
    width: 100%;
    height: 100px;
    background-color: rgb(53, 228, 30);

    float: left;
}
</style>
</head>
<body>

<h1>三栏布局</h1>
<h3>左中右布局，左右两边定宽，中间自适应:</h3>
<div class="box1">
<div class="center">圣杯布局中间弹性区域</div>
<div class="left">左固定</div>
<div class="right">右固定</div>
</div>

</ body>
</HTML>