css左侧盒子固定右边自适应

盒子左侧固定右边自适应

使用浮动加外边距设置父盒子高度,让子盒子高度100%继承父盒子,给做盒子设置宽度和浮动背景色,然后给右侧盒子设置marginleft宽度和背景色

    <style>.box{height: 50px;}.box >div{height: 100%;}.box1{width: 20px;float: left;
background: blue;}.box2{margin-left: 20px;background: brown;}</style>
</head>
<body><div class="box"><div class="box1"></div><div class="box2"></div></div>

使用浮动加hidden和上面方法类似,只不过把右边盒子的marginleft换成了overflowhidden

.box{height: 50px;
}
.box >div{height: 100%;
}
.box1{width: 200px;float: left;background-color: pink;
}
.box2{overflow: hidden;background-color: black;
}

使用flex实现,给父盒子设置弹性盒子,然后给右盒子添加flex1和overflow

.box {height: 200px;display: flex;
}.box > div {height: 100%;
}.box-left {width: 200px;background-color: blue;
}.box-right {flex: 1; // 设置flex-grow属性为1，默认为0overflow: hidden;background-color: red;
}

css左侧盒子固定右边自适应相关推荐

div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
1垂直两栏右边固定左边自适应的四种写法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
div css左边固定右边自适应布局
web前端开发之布局:先看效果图,最简单的左右布局.有可能还会被面试问道哈哈哈.一看也没什么特别之处,就是左边固定,右边自适应,就这么简单. 原理:通过设置一个margin-left;或者margin ...
两个div并排左边div宽固定右边自适应
实现两个div,左边固定div宽度200px,右边div自适应 <div class= "container"><div class="left&quo ...
CSS之中间固定两边自适应宽度
第一种:浮动布局实现 HTML: 这种方法我利用的就是浮动原理,左右定宽度分别进行左浮动和右浮动,此时主内容列(中间列没有定度)主会自动插入到左右两列的中间,最要注意的一点是,中间列一定要放在左右两列 ...
css 两边宽度固定中间自适应宽度
#content_left{ //左 width:73px; height:100px; vertical-align:middle; margin-right:-100px; float:lef ...
flex 实现左边固定右边自适应布局
css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
html 将盒子固定浏览器,浏览器默认css样式表 css之左盒子固定,右盒子自适应的一种实现方式...
浏览器默认css样式表在页面布局或者是列表布局中,我们经常出现一个场景:左边是固定宽度的盒子,右边自适应:div>label>Open... maoguiyou 2016年09月13日 ...
前端css实现左侧盒子宽度固定，右侧宽度自适应布局
效果图方法1:通过calc方法做宽度自适应设置width: calc(100% - 100px); (1)这里减100px是示例中有left类名的div宽度,具体减多少px根据情况来 (2)减号两 ...

css左侧盒子固定右边自适应

盒子左侧固定右边自适应

使用浮动加外边距设置父盒子高度,让子盒子高度100%继承父盒子,给做盒子设置宽度和浮动背景色,然后给右侧盒子设置marginleft宽度和背景色

使用浮动加hidden和上面方法类似,只不过把右边盒子的marginleft换成了overflowhidden

使用flex实现,给父盒子设置弹性盒子,然后给右盒子添加flex1和overflow

css左侧盒子固定右边自适应相关推荐

最新文章

热门文章