【CSS+HTML】实现三栏自适应布局

想做一只快乐的修狗

已于 2022-04-22 21:43:17 修改

阅读量880

点赞数 2

文章标签： css html

于 2022-04-22 21:42:26 首次发布

本文链接：https://blog.csdn.net/weixin_44109827/article/details/124355646

版权

1、知识储备

2、html代码

  <body>
    <div class="content">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
  </body>

3、css代码

<style>
      .content {
        height: 200px;
        /* 为左右留出位置 */
        padding: 0 100px;
      }
      .left {
        background-color: pink;
        width: 100px;
        height: 100px;
        /* 左浮动让三者在同一行 */
        float: left;
        margin-left: -100%;
        /* 消除左边间隙 */
        position: relative;
        left: -100px;
      }
      .middle {
        background-color: gold;
        /* 中间自适应 */
        width: 100%;
        height: 100px;
        float: left;
      }
      .right {
        background-color: deepskyblue;
        width: 100px;
        height: 100px;
        float: left;
        margin-right: -100px;
      }
    </style>

效果：

参考：

CSS之圣杯布局与双飞翼布局 - 掘金 (juejin.cn)

0012. CSS 三栏布局（6种）_哔哩哔哩_bilibili

优惠劵

想做一只快乐的修狗

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS+HTML】实现三栏自适应布局

2、html代码 <body> <div class="content"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> </body>3
复制链接

扫一扫