专栏首页河湾欢儿的专栏2.布局解决方案 两列、三列、多列、不定宽+一列自适应<6>

2.布局解决方案 两列、三列、多列、不定宽+一列自适应<6>

和上面的解决方案是一样的,自己动脑筋哦 下面的overflow的方式 display:table和flex大家自己练习。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,p{
            margin: 0;
            padding: 0;
        }
        .left,.center{
            float: left;
            margin-right: 20px;
            background: pink;
        }
        .left{
            background: yellowgreen;
        }
        .right{
            overflow: hidden;
            background: burlywood;
        }
        .left p,center p{
            width: 100px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right">
         <p>right</p>
         <p>right</p>
    </div>
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2.布局解决方案 一列定宽+一列自适应<4>

    河湾欢儿
  • 2.布局解决方案- 等高<8>

    河湾欢儿
  • 2.布局解决方案 一列不定宽+一列自适应<5>

    河湾欢儿
  • css布局-实现左中右布局的5种方式

    ? <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

    zhaoolee
  • css+ js 实现圆环时钟

    小蔚
  • python排序算法(三)

    。快排比较复杂,花了快两天琐碎时间琢磨了感觉还不是很好,据我们老师说当年提出快排的人是在上课突然想起来的,我等只能深深膜拜了

    py3study
  • IntelliJ IDEA 和 Eclipse等工具部署项目到Tomcat

    时下流行的两款IDE工具多为idea,Eclipse等产品,相比之下,idea更便捷,以页面样式,快捷性赢得了市场大部分开发者的喜爱。

    疯狂的KK
  • TGC小程序---首个智能印章小程序

    有幸参与了今年腾讯游戏嘉联华(即TGC),现场出现了一个挺奇特的小程序。 ? 它是服务于线下的,主要服务于2017年腾讯游戏嘉年华现场展区的卡片收集活动。 ? ...

    花叔
  • magento 2.3安装测试数据

      前面我们一步步composer安装Magento2.3,但是没有数据的话各项设置不是很熟悉,所以最好还是安装一下测试数据。下面我们就跟ytkah一起填充数据...

    ytkah
  • Xamarin 从零开始部署 iOS 上的 Walterlv.CloudKeyboard 应用

    本文将告诉大家如何从零开始在 iOS 上部署 Walterlv.CloudKeyboard 应用。这个 Walterlv.CloudKeyboard 应用是一个...

    林德熙

扫码关注云+社区

领取腾讯云代金券