如何利用css+html实现一个左右固定，中间自适应的三栏布局？

最新推荐文章于 2021-07-01 09:34:26 发布

栖溪阁晓生

最新推荐文章于 2021-07-01 09:34:26 发布

阅读量247

点赞数

分类专栏：前端开发文章标签： css html

本文链接：https://blog.csdn.net/weixin_39455881/article/details/106865666

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这个问题可以采用很多种方法解决，以下提供一种简单的实现方式：

<body>
	<div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>

.container div{
    height: 200px;
}

.container{
    padding: 0 200px;
}

.left, .main, .right {
    position: relative;
    float: left;
}

.main {
    background: yellow;
    width: 100%;
}

.left {
    background: red;
    margion-left: -100%;
    left: -200px;
}

.right {
    background: green;
    margion-left: -200px;
    left: 200px;
}

实现结果：

在这里插入图片描述

优惠劵

栖溪阁晓生

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何利用css+html实现一个左右固定，中间自适应的三栏布局？

这个问题可以采用很多种方法解决，以下提供一种简单的实现方式：<body> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div></body>.container di
复制链接

扫一扫