CSS是网页美化中最常用的技术之一,其中有一个常见的布局就是将三张图片平均排在一排。下面就来介绍一下如何实现。/*CSS样式*/ img{ width: 33.33%; float: left; }
CSS是网页美化中最常用的技术之一,其中有一个常见的布局就是将三张图片平均排在一排。下面就来介绍一下如何实现。
/*CSS样式*/ img{ width: 33.33%; float: left; }
首先,在HTML中将三张图片放入一个div中。
<!-- HTML代码 --> <div class="image-container"> <img src="image1.jpg" alt="图片1"> <img src="image2.jpg" alt="图片2"> <img src="image3.jpg" alt="图片3"> </div>
然后在CSS中设置该div的样式:
/*CSS样式*/ .image-container{ overflow: hidden; }
最后,在CSS中设置图片的样式。设置每张图片为33.33%宽度,然后浮动到左边。同时为了防止图片超出div容器的范围,将div的overflow属性设置为hidden,这样就可以自动将剩余部分隐藏。
以上就是如何使用CSS将三张图片平均排在一排的方法。当然,也可以使用其他方式实现相同效果。
粉丝
0
关注
0
收藏
0