css页面两行三列布局,div两行两列的布局
一、什么是两列布局
两列布局分为两种，一种是左侧定宽、右侧自适应，另一种是两列都自适应（即左侧宽度由子元素决定，右侧补齐剩余空间)。在钢性铸铁面试题里面属于常考题，也是一个前端开发工程师必须掌握的技能，下面将分别介绍实现方式。
二、左侧定宽、右侧自适应如何实现？
1.双inline-block
原理：两个元素都设置显示：内嵌块，为了消除超文本标记语言空格的影响，父元素的字体大小需要设置为0,右侧自适应元素的宽度使用计算函数计算。如果两个元素的高度不一样，可以给元素设置垂直对齐：顶部调整。
缺点：由于父元素设置了字体大小为0,子元素内文字不会显示
！DOCTYPE htmlhtmlheadmeta charset= utf-8 title/title style * { padding:0；边距：0;}.box {高度：600 px宽度：100%;字体大小：0;}.left { display:inline-block；宽度：100像素高度：200像素背景色：红色；垂直对齐：顶部；}.右{显示：内嵌块；宽度：calc(100%-100px)；高度：400像素背景色：蓝色；垂直对齐：顶部；}/style/headbydivdivspan 1234/span/div div span 1234/span/div/div/body/html
2.双浮动
原理：两个元素设置浮动，右侧自适应元素宽度使用计算函数计算
缺点：父元素需要清除浮动
！DOCTYPE htmlhtmlheadmeta charset= utf-8 title/title style * { padding:0；边距：0;}.box {高度：600 px宽度：100%;}.left { float:left；宽度：100像素高度：200像素背景色：红色；}.右{浮动：左；宽度：calc(100%-100px)；高度：400像素背景色：蓝色；}/style/headbodydivdivspan 123 daddddddddddddddddddddddddddddddddddddddd/span/div/div/div/body/html原理：左侧定宽元素浮动，右侧自适应元素设置左边距的值大于定宽元素的宽度即可
缺点：父元素需要清除浮动
！DOCTYPE htmlhtmlheadmeta charset= utf-8 title/title style * { padding:0；边距：0;}.box {高度：600 px宽度：100%;}.left { float:left；宽度：100像素高度：200像素背景色：红色；}.右{ margin-left:100px；高度：400像素背景色：蓝色；}/style/headbydivdivp 1234/p/div divp 1234/p/div/div/body/html
4.浮动+BFC
原理：父元素设置溢出：隐藏，左侧定宽元素浮动，右侧自适应元素设置溢出：自动创建英国时尚协会
缺点：左侧元素的内容如果超过设定宽度会重叠到右侧元素上
！DOCTYPE htmlhtmlheadmeta charset= utf-8 title/title style * { padding:0；边距：0;}.box {高度：600 px宽度：100%;溢出：隐藏；}.left { float:left；宽度：100像素高度：200像素背景色：红色；}.右{溢出：自动；高度：400像素背景色：蓝色；}/style/headbydydiv 111111111111111111/div 1111111111111111/div/div/div/body/html
5.absolute+margin-left
原理：父元素相对定位，左侧元素绝对定位，右侧自适应元素设置左边距的值大于定宽元素的宽度
缺点：父元素设置了相对定位
！DOCTYPE htmlhtmlheadmeta charset= utf-8 title/title style * { padding:0；边距：0;}.box {高度：600 px宽度：100%;位置：相对；}.左{位置：绝对；宽度：100像素高度：200像素背景色：红色；}.右{ margin-left:100px；高度：400像素背景色：蓝色；}/style/headbydydivdiv/div div/div/div/body/html
6.flex布局
原理：父元素设置显示器：flex，自适应元素设置弹性：1
缺点：存在兼容性问题，IE10以下不支持
！DOCTYPE htmlhtmlheadmeta charset= utf-8 title/title style * { padding:0；边距：0;}.box {高度：600 px宽度：100%;显示器：flex}。左{宽度：100像素高度：200像素背景色：红色；}.right { flex:1；高度：400像素背景色：蓝色；}/style/headbydydivdiv/div div/div/div/body/html
三、左右两侧元素都自适应
严格来讲，并不算两个元素都是自适应，只是将上面的定宽改为由子元素撑开而已
1.浮动+BFC
原理和上面一样，只是左侧元素的宽度没有设置，由子元素撑开
2.table布局
原理：父元素显示：表格，左侧元素外围用一个差异包裹，该差异设置显示：表格单元格，宽度：0.1%(保证最小宽度),左侧元素内部设置右边距，右侧元素设置显示：表格单元格。
缺点：IE7及以下不支持，当显示：表格时，填充失效，父元素的行高属性失效，当显示：表格单元格时，边距失效。
！DOCTYPE htmlhtmlheadmeta charset= utf-8 标题/标题样式。父{ display:table；宽度：100%;}.框{显示：表格单元格；宽度：0.1%;}.left { margin-right:20px；背景色：红色；高度：200px}。右{显示：表格单元格；背景色：蓝色；高度：300 px }/style/headbydivdiv div 126545453 ddddddd d 453453453/div/div div 12121/div/div/body/html
3.flex布局
原理、缺点同上面的弯曲布局
4.grid布局
原理：父元素设置显示：网格，网格-模板-列：自动1fr(这个属性定义列宽，自动关键字表示由浏览器自己决定长度2005年法国是一个相对尺寸单位，表示剩余空间做等分)网格间隙：20px(行间距)
缺点：兼容性太差，IE11都不支持，谷歌57以上才可以
！DOCTYPE htmlhtmlheadmeta charset= utf-8 标题/标题样式。父{ display:grid；网格-模板-列：自动1fr网格间隙：20px} .左{背景色：红色；高度：200px}。右{身高：300像素背景色：蓝色；}/style/headbydydiv 11111111111111111/div/div/div/body/html到此这篇关于半铸钢钢性铸铁(铸造半钢)实现两列布局的普通种方法的文章就介绍到这了，更多相关钢性铸铁两列布局内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。