圣杯布局

最新推荐文章于 2025-03-24 10:35:25 发布

原创最新推荐文章于 2025-03-24 10:35:25 发布 · 92 阅读

CC 4.0 BY-SA版权

<style>

    .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
   		margin-left: -100%;
   		position: relative;
   		left: -100px;
        }
    .right {
        float: left;
        width: 100px;
        height: 200px;
        background-color: yellow;
   		margin-left: -100px;
   		position: relative;
   		right: -100px;
    }
    .main {
        float: left;
        width: 100%;
        height: 200px;
        background-color: blue;
    }
    .container {
   		padding-left: 100px;
   		padding-right: 100px;
}
</style>
<body>
    <p class="container">
        <p class="main"></p>
        <p class="left"></p>
        <p class="right"></p>
    </p>
</body>