css自动填满父级剩余宽度

1、父元素内有两个子元素，其中一个元素宽度已知，另一个元素填满父级剩余宽度，这种情况可以用 calc() 来实现。

<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*清除浮动*/.clearfix {zoom: 1;}.clearfix:after {clear: both;display: block;content: '';}.father {width: 300px;height: 100px;background: gainsboro;}.child_one {width: 50px;height: 50px;background: blueviolet;float: left;}.child_two {/*注意'-'的左右要加空格*/width: calc(100% - 50px);height: 60px;background: red;float: left;}</style></head><body><div class="father clearfix"><div class="child_one"></div><div class="child_two"></div></div></body>
</html>

效果如下

2、父元素内有两个子元素，其中一个元素宽度不确定，另一个元素要填满父级剩余宽，可以用弹性盒模型中的 flex-grow 这一属性来实现

<html><head><meta charset="UTF-8"><title></title><style type="text/css">.father {width: 300px;height: 100px;background: gainsboro;display: flex;justify-content: flex-start;/*这也是一个很好用的属性,可以让子元素在交叉轴(垂直方向)居中显示*/align-items: center;}.child_one {background: blueviolet;}.child_two {height: 60px;background: red;/*设置该元素索取父级剩余宽度*/flex-grow:1;}</style></head><body><div class="father clearfix"><div class="child_one">child_one</div><div class="child_two"></div></div></body>
</html>

效果如下

关于 flex-grow 这个属性，可以参考下这篇博客 https://blog.csdn.net/m0_37058714/article/details/80765562

css自动填满父级剩余宽度相关推荐

Ext.grid.ColumnModel列宽度自动填满grid宽度
var grid = new Ext.grid.GridPanel({ renderTo : Ext.getBody(), ds : store, cm : cm, ...
html怎么使图片自动填充,CSS怎么将img图片填满父容器div自适应容器大小
CSS怎么将img图片填满父容器div自适应容器大小发布时间:2021-03-19 09:35:26 来源:亿速云阅读:114 作者:小新这篇文章将为大家详细讲解有关CSS怎么将img图片填满父 ...
一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度
div自动填满剩余高度 html <div class="wrapper" style="height:800px;"><div class= ...
[WP8] ListBox的Item宽度自动填满
[WP8] ListBox的Item宽度自动填满范例下载范例程序代码:点此下载问题情景开发WP8应用程序的时候,常常会需要使用ListBox作为容器来呈现各种数据集合.但是在ListBox呈现 ...
[css] 如何取消从父级元素继承下来的CSS样式呢？
[css] 如何取消从父级元素继承下来的CSS样式呢? 如果是恢复单个属性样式,例如font-size,可以使用 font-size: initial; 如果是将所有属性样式恢复为默认状态,可以使用 ...
css高度自动填满_Unity--自动版面（Grid Layout Group）
Grid Layout Group 网格布局组组件将其子布局元素放置在网格中. Padding:(填充) 布局组边缘内的填充.与其他布局组不同,"网格布局组"将忽略其所包含布局元素 ...
图片填满父元素，自适应缩放
#max-width:100% 相对于img本身的尺寸而言,最大的宽度为自身宽度 #width:100% 相对于父级宽度的 1.等比例缩小垂直居中:按宽度等比列缩放或者可以选择按高度等比缩放 ...
解决子级用css float浮动而父级div没高度不能自适应高度
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 方法一:对父级设置固定高度此方法可用于能确定父级div内子级对象高度. 缺点: 父级是固定高度,而不随 ...
html去掉父元素样式,CSS清除浮动使父级元素展开的三个方法
一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开. 为了使父级元素展开,有三种方法: 第一:设置父级元素的高度,但 ...

css自动填满父级剩余宽度

css自动填满父级剩余宽度相关推荐

最新文章

热门文章