我正在尝试编写HTML和CSS代码,使得三张截图图片能够像下面的屏幕截图一样对齐。
当用户缩小窗口时,左右两侧的图片应该向中心移动,或者更加紧密地靠在主要图片后面,而主要图片始终保持居中。
我的开发链接: http://leongaban.com/portfolio/athenasweb/ 我的CodePen链接: http://codepen.io/leongaban/pen/AwJFt
HTML
当用户缩小窗口时,左右两侧的图片应该向中心移动,或者更加紧密地靠在主要图片后面,而主要图片始终保持居中。
我的开发链接: http://leongaban.com/portfolio/athenasweb/ 我的CodePen链接: http://codepen.io/leongaban/pen/AwJFt
HTML
<div class="pattern">
<div class="athena_thumbs">
<div class="first">
<img src="../../images/athena1.jpg"/>
</div>
<div class="second">
<img src="../../images/athena2.jpg"/>
</div>
<div class="third">
<img src="../../images/athena3.jpg"/>
</div>
</div>
</div>
CSS
div.inner .pattern {
position: absolute;
width: 100%;
height: 100%;
background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png');
background-repeat: repeat;
z-index:2;
}
.athena_thumbs {
position: absolute;
max-width: 1000px;
margin: 250px auto 0;
}
.athena_thumbs .first {
position: relative;
margin: 0 auto;
float: left;
left: 25%;
right: 25%;
z-index: 3;
}
.athena_thumbs .second {
position: relative;
float: left;
left: 10%;
right: 5%;
z-index: 2;
}
.athena_thumbs .third {
position: relative;
float: left;
right: 10%;
left: 5%;
z-index: 1;
}