通常我们在布局写页面样式时会做到列表项,比如一个列表是左边有固定图片宽度,右边又是自适应的宽度。那在这时候要去实现这个布局应该怎么做?
一般有以下几种做法:
第一,浮动布局,利用float:left和float:right来实现移动到两边的,但这个做法有问题的是浮动的元素会脱离文档流,没有自身高度。需要解决这问题就需要在这两个的父级元素上加上清除浮动元素clear:both等,而且这样的做法也没有解决自适应的问题,只有知道两个具体的宽度时才可用这个方法。
第二,利用h5的弹性盒子属性,display:flex来实现布局,这个可以做到左边固定右侧自适应的布局,但也是有一点缺点,在低版本的浏览器是不兼容的,这个大都用在移动布局界面上,非常实用。
第三,利用grid布局
第四,利用overflow:hidden布局实现左侧固定右侧自适应,可以适应兼容各浏览器,好用也方便。


.box {
       margin-top: 200px;
       background-color: pink;
}

.left {
       width: 50px;
       height: 50px;
       background-color: deepskyblue;
       /*左边的盒子左浮动*/
       float: left;
}

.right {
       box-sizing: border-box;
       /*padding-left: 50px;*/
       /*height: 50px;*/
       background-color: orangered;
       /*右边的盒子设置overflow:hidden*/
       overflow: hidden;
}
.clearfix:after {
       height: 0;
       content: ".";
       display: block;
       clear: both;
       visibility: hidden;
}

<div class="box clearfix">
      <div class="left">
            左边固定宽度
      </div>
      <div class="right">
            右边宽度自适应, 右边宽度自适应, 右边宽度自适应,右边宽度自适应,
            右边宽度自适应, 右边宽度自适应, 右边宽度自适应, 右边宽度自适应,
            右边宽度自适应, 右边宽度自适应, 右边宽度自适应, 右边宽度自适应,
      </div>
</div>

- THE END -

暂无标签 # 953 阅读
分享到:
Like

目录

    评论 (0)

    • 昵称
    • 邮箱
    • 网址

    🙋🏻‍♂️ 这里是我的个人站点,我在这里记录关于产品、设计、前端相关的内容,欢迎关注!

    联系我

    菜单

    热门文章

    最新评论

    水无心的头像 宇宙超级无敌美少女梦梦的头像 luss的头像 wu先生的头像 阿锋的头像 鸟叔的头像 娇娇的头像 HEYHUA的头像 真z的头像 关山映月的头像 若志奕鑫的头像 yangyuji的头像 米斯特宫的头像 哥斯拉的头像