本文介绍了两种实现网页自适应布局的方法：一是利用CSS弹性盒模型（Flexbox）通过justify-content属性实现元素均匀分布；二是通过column-count属性实现多列布局。通过实例展示了如何让10元、20元、30元、50元等元素根据不同屏幕适应调整。
方法一：使用box-pack的justify实现：使用display：flex弹性盒子模型实现根据窗口大小自适应宽度。代码如下：
*{
margin: 0;
padding: 0;
}
.container{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: 30px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack:justify ;
justify-content: space-between;
}
.container a{
width:20%;
display: block;
height: 50px;
line-height: 45px;
text-align: center;
border 1px solid red;
color: sandybrown;
font-size: 16px;
margin-bottom: 5px;
border-radius: 3px;
background-color: skyblue;
text-decoration: none;
}
效果如下：
方法二：使用column多列 布局实现，具体代码如下：
*{margin: 0;padding: 0;}
.container{
-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;
-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;
margin-top: 100px;
}
.container a{
display: block;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid sandybrown;
color: #0066CC;
font-size: 16px;
margin-bottom: 5px;
border-radius: 4px;
background-color: salmon;
text-decoration: none;
}
效果如下：
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
