有哪些网站结构是不合理的,怎么用ps做购物网站,网站域名过期怎么办,Dw制作个人网站目录
示例1 #xff08;中间自适应
示例2#xff08;中间自适应
示例3#xff08;中间自适应
示例4 #xff08;自适应成比
示例5#xff08;左中定宽#xff0c;右边自适应
示例6#xff08;中间自适应
示例7#xff08;中间自适应
示例8#xff08;中间定宽…目录
示例1 中间自适应
示例2中间自适应
示例3中间自适应
示例4 自适应成比
示例5左中定宽右边自适应
示例6中间自适应
示例7中间自适应
示例8中间定宽两边自适应 css实现两栏CSS | CSS实现两栏布局左边定宽 右边自适应左右成比自适应-CSDN博客 div classfatherdiv classbox1盒子1/divdiv classbox2盒子2/divdiv classbox3盒子3/div
/div注意示例没有设置高度由文字支撑
示例1 中间自适应
压缩过程 .father{margin: 20px;padding: 0;}.box1,.box2{width: 300px;background-color:rebeccapurple;}.box1{float: left;}.box2{float: right;}.box3{background-color: rgb(216, 252, 216);/* 减去两边盒子宽度 */width: calc(100%-600px);}示例2中间自适应 .father{width: 100%;}.box1{width:300px;background-color: rebeccapurple;float: left;}.box2{width: calc(100% - 600px);background-color: rgb(216, 252, 216);float: left;}.box3{width: 300px;background-color: rebeccapurple;float: left;}示例3中间自适应 .box1{width: 300px;background-color:rebeccapurple;display: inline-block;}.box2{width: calc(100% - 600px);background-color: rgb(216, 252, 216);display: inline-block;}.box3{width: 300px;background-color: rebeccapurple;display: inline-block;} 示例4 自适应成比 flex: 1;放大且缩小并等分所有空间 .father{display: flex;}.box1{background-color: rebeccapurple;/* flex:1 flex: 1 1 0px *//* 当flex为1时占满剩余宽度的一份一份是多少取决于总宽度-固定宽度之和/几份*所占份数 */flex: 1;}.box2{background-color: rgb(216, 252, 216);flex: 1;}.box3{background-color: rebeccapurple;flex: 1;}示例5左中定宽右边自适应 注意该盒子定宽后也会随父盒子挤压而变小 .father{display: flex;}.box1{width: 100px;background-color: rebeccapurple;}.box2{width: 100px;background-color: rgb(216, 252, 216);}.box3{flex: 1;background-color: rebeccapurple;}示例6中间自适应 .box1 {float: left;width: 200px;background-color: rebeccapurple;
}
.box2 {width: 200px;background-color: rgb(216, 252, 216);float: right;
}
.box3 {margin-left: 200px;margin-right: 200px;background-color: green;
}示例7中间自适应 .father {display: table;
}
.box1 {width: 200px;display: table-cell;background-color: red;
}
.box2 {display: table-cell;background-color: blue;
}
.box3 {display: table-cell;width: 200px;background-color: green;
}示例8中间定宽两边自适应 .father{display: flex;}.box1{background-color: rebeccapurple;flex: 1;}.box2{background-color: rgb(216, 252, 216);/* flex: 1; */width: 300px;}.box3{background-color: rebeccapurple;flex: 1;} 示例9中间自适应 左右定宽也会被等比缩小因为flex: 1;放大且缩小并等分所有空间 .father{display: flex;}.box1{background-color: rebeccapurple;width: 300px;}.box2{background-color: rgb(216, 252, 216);flex: 1;}.box3{background-color: rebeccapurple;width: 300px;}
