1. float+overflow:hidden
这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性,所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent { margin: 0 auto; // 使父容器水平居中显示 overflow: hidden; zoom: 1; max-width: 1000px; } .left { float: left; margin-right: 20px; width: 200px; background-color: green; } .right { overflow: hidden; zoom: 1; background-color: yellow; } </style> </head> <body> <div class="parent"> <div class="left"> <p>left left left left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> </body> </html>
2. float: left+ margin-left
float使左边的元素脱离文档流,右边的元素可以和左边的元素显示在同一行,设置margin-left让右边的元素不覆盖掉左边的元素, 代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent { margin: 0 auto; max-width: 1000px; } .parent::after { content: ''; display: table; clear: both; } .left { float: left; width: 200px; background-color: green; } .right { margin-left: 200px; background-color: yellow; } </style> </head> <body> <div class="parent"> <div class="left"> <p>left left left left</p> </div> <div class="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div> </body> </html>
3. position: absolute + margin-left
左边绝对定位,右边设置margin-left,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent { position: relative; margin: 0 auto; max-width: 1000px; } .left { position: absolute; width: 200px; background-color: green; } .right { margin-left: 200px; background-color: yellow; } </style> </head> <body> <div class="parent"> <div class="left"> <p>left left left left</p> </div> <div class="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div> </body> </html>
4. flex布局
flex布局可以使两个子元素显示在同一行,只要左边的宽度固定,就可以实现效果, 代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent { display: flex; margin: 0 auto; max-width: 1000px; } .left { width: 200px; background-color: green; } .right { margin-left: 20px; flex: 1; background-color: yellow; } </style> </head> <body> <div class="parent"> <div class="left"> <p>left left left left</p> </div> <div class="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div> </body> </html>
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金钱帮资源网 Copyright www.kbjia.com
暂无“CSS实现两栏布局,左边固定,右边自适应的4种方法”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年10月12日
2024年10月12日
- 群星《金吾卫之风起金陵 动漫原声带》[FLAC/分轨][98.08MB]
- JessicaMolaskey-SittinginLimbo--2024[wav]
- 中国音乐地图之听见江苏扬州小调扬剧经典唱段2020[WAV分轨]
- 中国音乐地图之听见国乐阮柳琴音乐集2021[WAV+分轨]
- 常石磊.2010-自己【风向乐动】【WAV+CUE】
- TWINS.2008-桐话妍语(引进版)【英皇娱乐】【WAV+CUE】
- 钮大可陈本瑜-山谷与风的对话【飞碟】【WAV+CUE】
- 群星《百听不厌-HIFI金曲王》2CD[DTS-WAV分轨]
- HIFI天碟《发烧情路》2CD\DTS-ES[WAV]
- 群星《品味感性男声》2CD[DTSWAV]
- 群星《观风月》[320K/MP3][133.98MB]
- 群星《观风月》[FLAC/分轨][321.4MB]
- 群星《奔向所有时空的你 影视原声带》[320K/MP3][47.43MB]
- 陶喆.2013-再见你好吗【伟大文化】【WAV+CUE】
- 李宗盛.1994-不舍(纸盒版)【滚石】【WAV+CUE】