容器内两部分,一部分固定宽度,一部分宽度自适应占满剩余位置

<div class=‘container‘}>
    <div class=‘child1‘/>
    <div class=‘child2‘/>
</div>

上面是html代码

方法一:flex

.container {
   display:flex;
   .child1 {
        flex;1;
    }
   .child2 {
       width: 200px;
    }
}

方法二:c3计算属性

.container {
   .child1 {
        width: clac(100% - 200px);
    }
   .child2 {
       width: 200px;
    }
}

方法三:设置盒子间距值

.container {
   .child1 {
       width: 100%;
       margin-right: 200px;
    }
   .child2 {
       width: 200px;
    }
}

原文地址:https://www.cnblogs.com/w-819/p/10713880.html

时间: 2024-11-04 04:44:20

容器内两部分,一部分固定宽度,一部分宽度自适应占满剩余位置的相关文章

C# 鼠标移动Winfor窗体内或者panel容器内的控件 显示虚线/实现虚线框来确定位置

C# 鼠标移动窗体或者panel容器内的控件 移动虚线/实现虚线框来确定位置 1.用到的方法介绍 今天,根据领导指示指导移动容器内的控件,生成虚线框,使用 1 // 2 // 摘要: 3 // 在屏幕上的指定边界内,按指定背景色绘制处于指定状态的可逆框架. 4 // 5 // 参数: 6 // rectangle: 7 // 代表要绘制矩形的尺寸的 System.Drawing.Rectangle(采用屏幕坐标). 8 // 9 // backColor: 10 // 框架的背景的 System

css实现的左右两栏宽度自适应中间一栏宽度固定

css实现的左右两栏宽度自适应中间一栏宽度固定:更多的时候可能是设置左右两栏宽度固定,中间一栏宽度自适应,不过本章节恰恰相反,下面介绍一下如何实现中间一栏宽度固定,左右两栏宽度自适应,关于左右两栏固定,左右宽度自适应可以参阅左右两列宽度固定中间一栏宽度自适应代码实例一章节.代码实例: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="autho

使用css3的flex盒模型来实现两栏布局(左侧固定宽度,右侧自适应宽度)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; display:flex;/*设为伸缩容器*/ flex-flow:row;/*伸缩项目单行排列*/ } .stable{ width:200px;/*固定宽度*/ border:1px solid #ccc; ma

两列布局,左边div固定宽度,右边宽度自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

Docker官方论坛中回复最多的一个帖子“在数据容器内升级数据”

Docker官方论坛中回复最多的一个帖子"在数据容器内升级数据" matlehmann我有一个含数据的容器,它有一个卷(比如在/var/data)中的持久性数据.该容器包含持久性数据对另一个容器的软件.对于该软件的新版本,需要升级所述永久数据(结构或布局改变等).其结果是,我想与在相同的位置已升级的数据的另一数据容器(在/var/data)和仍保留旧数据容器与它的数据不变.这样一来,我可以用旧的数据容器与旧版本的软件,万一出了差错.但是,我怎么能做到这一点?以实现所期望的结果所需要的步

父容器内子容器浮动的高度自适应问题 _ CSS_HTML

‍1.当‍父容器不设置固定高度.宽度时,且子元素设置了浮动.让父容器随子容器的撑开而撑开,缩小而缩小,自动适应高宽度. 这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS HACK.zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!--[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!--[i

容器内应用日志收集方案

容器化应用日志收集挑战 应用日志的收集.分析和监控是日常运维工作重要的部分,妥善地处理应用日志收集往往是应用容器化重要的一个课题. Docker处理日志的方法是通过docker engine捕捉每一个容器进程的STDOUT和STDERR,通过为contrainer制定不同log driver 来实现容器日志的收集,缺省json-file log driver是将容器的STDOUT/STDERR 输出保存在磁盘上,然后用户就能使用docker logs <container>来进行查询. 在部署

flex 布局下关于容器内成员 flex属性的理解

flex布局分为容器的设置和容器内成员的设置,容器的设置是管理成员的排列方式,也就是管理排列的方向和对齐的位置.成员的设置则是关于成员的大小和显示的位置(order). 弹性布局,弹性布局,自然要提现他的弹性,所谓弹性也就是对空间的分配.成员设置中的flex属性,就是对于额外空间的管理. flex可以设置三个值,第一个值必选,后两个可选. flex的第一个值 可以用flex-grow单独设置,代表含义是对额外空间的占据量,所谓额外空间就是这一行多余的空间,有多余的空间这一属性才有用.默认值是0,

html中的div、td 、p 等容器内强制换行和不换行的实现

div.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下1.强制不换行,同时以省略号结尾. 代码如下:<div style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" > 你好朋友朋友朋友我为什么不能看到效果啊 </div> 2.css自动换行 代码如下:div{ wor