css常见自适应布局_html/css

来源：动视网责编：小采时间：2020-11-27 16:17:37

css常见自适应布局_html/css

css常见自适应布局_html/css_WEB-ITnose:1.两列布局，左侧宽度固定，右侧宽度自适应 1.1.左侧进行浮动，右侧设置margin-left /* 1.利用浮动进行布局*/ .left { float: left; width: 200px; height: 200px; background-color: cornflowerblue; } .right { m

推荐度：

点击下载本文 文档为doc格式

导读css常见自适应布局_html/css_WEB-ITnose:1.两列布局，左侧宽度固定，右侧宽度自适应 1.1.左侧进行浮动，右侧设置margin-left /* 1.利用浮动进行布局*/ .left { float: left; width: 200px; height: 200px; background-color: cornflowerblue; } .right { m

1.两列布局，左侧宽度固定，右侧宽度自适应

1.1.左侧进行浮动，右侧设置margin-left

/* 1.利用浮动进行布局*/ .left { float: left; width: 200px; height: 200px; background-color: cornflowerblue; } .right { margin-left: 200px; height: 200px; background-color: bisque; }

1.2.利用绝对定位来代替浮动

/* 2.利用绝对定位进行布局*/ .wrap { position: relative; } .left { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: cornflowerblue; } .right { margin-left: 200px; height: 200px; background-color: bisque; }

2.两列布局，右侧宽度固定，左侧宽度自适应

2.1.利用浮动进行布局

/* 1.利用浮动进行布局*/ .left { margin-right: 200px; height: 200px; background-color: cornflowerblue; } .right { float: right; width: 200px; height: 200px; background-color: bisque; }

注：right要写在left的前面，否则会出现如下问题。然后百度了下，终于找到了如下一段话（首先要明白浮动元素只对后面元素有影响，浮动元素本身并不浮动，只是脱离文档流，后面的元素会上移而占据浮动元素的位置。所以按你说的话，就要利用负边距把浮动元素拉高才能完成。）。

2.2.利用绝对定位进行布局

/* 2.利用绝对定位进行布局*/ .wrap { position: relative; } .left { margin-right: 200px; height: 200px; background-color: cornflowerblue; } .right { position: absolute; top: 0; right: 0; width: 200px; height: 200px; background-color: bisque; }

3.三列布局，中间宽度固定，两侧宽度自适应

/* 1.常规实现方式*/ .left, .right { width: 50%; height: 200px; background-color: cornflowerblue; } .left { margin-left: -300px; float: left; } .right { margin-right: -300px; float: right; } .center { margin: 0 auto; width: 600px; height: 200px; background-color: bisque; }

4.三列布局，中间宽度自适应，两侧宽度固定

4.1.利用浮动实现

/* 1.浮动实现方式*/ .left, .right { width: 300px; height: 200px; background-color: cornflowerblue; } .left { float: left; } .right { float: right; } .center { margin: 0 300px; height: 200px; background-color: bisque; }

4.2.利用绝对定位实现

/* 2.绝对定位方式实现*/ .left, .right { position: absolute; top: 0; width: 300px; height: 200px; background-color: cornflowerblue; } .left { left: 0; } .right { right: 0; } .center { margin: 0 300px; height: 200px; background-color: bisque; }

5.两列，左右等高显示

.wrap { overflow: hidden; } .left, .right { margin-bottom: -10000px; padding-bottom: 10000px; } .left { background-color: cornflowerblue; } .right { float: right; width: 400px; background-color: bisque; }

10. 是否忘记了写DTD?