html图片自动适应宽度,图片横排自适应宽度响应式CSS代码

多张图片响应式水平排列自适应效果CSS代码

全屏时的效果

宽度小于615的效果

屏幕宽度小于465的效果

样式代码&＃xff1a;

.test {

float: left;

width: 25%;

box-sizing: border-box;

padding: 10px;

min-width: 150px;

}

.container {

width: 100%;

}

&＃64;media (max-width:615px ) {

.test {

float: left;

width: 33%;

box-sizing: border-box;

padding: 10px;

min-width: 150px;

}

}

&＃64;media (max-width:465px ) {

.test {

float: left;

width: 50%;

box-sizing: border-box;

padding: 10px;

min-width: 150px;

}

}

&＃64;media (max-width:315px ) {

.test {

float: left;

width: 100%;

box-sizing: border-box;

padding: 10px;

}

}

html代码

喜欢 (13)or分享 (0)