css3div布局 |jsp中怎么新建css文件路径

下面是一些CSS3布局的实现方式:

/* 定义一个动态调整宽度和高度的div */
.responsive{
width:100%;
height:auto;
}

这段代码可以使得该div的宽度自适应屏幕大小，同时高度也会根据宽度的变化而自适应。

/* 定义一个多列布局的div */
.cols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
padding: 10px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

这段代码可以实现一个多列布局的div，其中每个列宽度平均分配，同时支持响应式布局。

CSS3还提供了其他很多有用的布局方式，可以根据个人需要来选择使用。